कैसे एक सुविधा का आकार बदलने के लिए और OpenLayers 3 में ज़ूम करने पर स्केलिंग से इसे रोकें

Question

मैंने मानचित्र के रूप में एक छवि के साथ एक कस्टम ओपनलैयर्स 3 मानचित्र (पड़ोस में बिक्री के लिए घरों को दिखाने के लिए उपयोग किया जाता है) को आरंभीकृत किया है।

फिर, मैं प्रत्येक घर के लिए गतिशील रूप से अतिरिक्त सुविधाओं और परतों का निर्माण करता हूं (प्रत्येक फीचर का एंकर इसकी छवि के मध्य के रूप में सेट है)।

मैं sizeफीचर को इनिशियलाइज़ करते समय प्रॉपर्टी का उपयोग करने की कोशिश कर रहा हूँ , लेकिन यह क्या करता है कि छवि को आकार देने के बजाय इसे क्रॉप किया जाए।

मुझे लगता है कि मैंने resizeओएल 2 में कहीं न कहीं परतों के लिए फ़ंक्शन देखा है , लेकिन मैं इसे ओएल 3 में नहीं पा सकता हूं ... क्या इस तरह का फ़ंक्शन परिणाम प्राप्त करना चाहेगा?

समस्या यह भी है कि नक्शे से बाहर ज़ूम करने पर सुविधाएँ बहुत बड़ी हो जाती हैं, और बहुत अधिक ज़ूम करने पर बहुत छोटी हो जाती हैं। क्या फीचर के निर्देशांक को निर्दिष्ट करने का कोई तरीका है, तो इसे बड़े या बहुत छोटे (कुछ प्रकार के स्थिर आकार) में जाने से रोकने के लिए किसी तरह का अदृश्य मार्जिन / पैडिंग करें?

यहां सुविधाओं का वास्तविक व्यवहार है (यहां देखा गया फीचर ब्लैक हाउस है): - अगला: सही आकार, हालांकि ज़ूम आउट होने पर घर छोटा होना चाहिए (जैसा कि पहली तस्वीर पर देखा गया है)। - इस आखिरी तस्वीर में फिर से नीचे स्केल करने के बजाय घर को बड़ा होना चाहिए। ।

Answer 1

मुझे लगता है आप एक का उपयोग करें ol.style.Icon। ol.style.Iconएक scale विकल्प है जिसे आप आइकन छवि को स्केल करने के लिए उपयोग कर सकते हैं।

उदाहरण के लिए, यदि आप एक छवि नीचे देना चाहते हैं तो आप इस तरह से कुछ का उपयोग करेंगे:

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

अब, यदि आप scaleवर्तमान रिज़ॉल्यूशन के आधार पर विभिन्न मान चाहते हैं, तो आप वेक्टर लेयर के लिए एक स्टाइल फंक्शन पास कर सकते हैं:

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

ध्यान दें कि, एक अनुकूलन के रूप में, उपरोक्त कोड ol.style.Iconऑब्जेक्ट्स, ol.style.Styleऑब्जेक्ट और शैलियों की सरणी का पुन: उपयोग करता है, हर बार शैली फ़ंक्शन को बनाने के लिए ऑब्जेक्ट बनाने से बचने के लिए।

Comments

अंत में मुझे यह काम करने के लिए मिला, धन्यवाद। मैंने आपके कोड को थोड़ा सा अनुकूलित किया है: स्रोत को स्वयं सुविधा को शामिल करने की आवश्यकता है: source: new ol.source.Vector({features:[iconFeature]})अन्यथा परत के भीतर कुछ भी नहीं डाला गया है (किसी कारण से, संभवतः सुविधा के ज्यामिति तत्व से संबंधित)।

— जेफ नोएल