कैसे MapBox-जीएल-js में निश्चित ज़ूम स्तरों पर बिंदु लेबल को छिपाने के लिए?

वोट
4

मैं MapBox-जीएल-js उपयोग कर रहा हूँ एक नक्शे पर एक GeoJSON फ़ाइल से अंक प्रस्तुत करने के लिए।

प्रत्येक बिंदु के लिए मैं भी मार्कर आइकन के नीचे एक लेबल दिखा। मैं वर्तमान में निम्न कोड के साथ ऐसा करते हैं:

map.addSource(mypoints, {
    type: geojson,
    data: mypoints.geojson,
});

map.addLayer({
    id: layer-mypoints,
    type: symbol,
    source: mypoints,
    layout: {
        icon-image: marker-15,
        text-field: {name},
        text-anchor: top
    }
});

यह काम करता है के रूप में उम्मीद और अंक मानचित्र से जुड़ जाते हैं और लेबल प्रत्येक बिंदु के तहत प्रदान की गई है।

नक्शा अव्यवस्था कम करने के लिये मैं लेबल जब नक्शा एक निश्चित ज़ूम स्तर पिछले ज़ूम आउट किया गया है (और जब नक्शा ज़ूम इन करता है ठीक इसके विपरीत लेबल दिखाएं) को छिपाने के लिए चाहते हैं। मैं हमेशा कोई बात नहीं क्या ज़ूम स्तर है बिंदु प्रतीक दिखाना चाहते हैं।

मैं यह कैसे करूं पता नहीं है। यह कैसे प्राप्त करने के लिए कोई भी विचार बहुत सराहना की जाएगी!

20/10/2016 को 10:45
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
6

कुछ और सोच / पढ़ने / परीक्षण करने के बाद मुझे लगता है कि मैं समस्या का समाधान मिल गया है।

मैं अब एक परत है कि केवल माउस से पता चलता जोड़ने के लिए, और यह भी एक दूसरी परत है कि केवल लेबल होते हैं जोड़ें। इस दूसरी परत में मैं ज़ूम स्तर जहाँ मैं जब उपयोगकर्ता नक्शा ज़ूम लेबल प्रकट करना चाहते हैं के लिए 'minzoom' गुण सेट।

map.addSource("mypoints", {
    type: "geojson",
    data: "mypoints.geojson",
});


// Layer with icons that should always be visible
map.addLayer({
    "id": "layer-mypoints",
    "type": "symbol",
    "source": "mypoints",
    "layout": {
        "icon-image": "monument-15",
        "icon-allow-overlap": true
    }
});            

// Layer with just labels that are only visible from a certain zoom level
map.addLayer({
    "id": "layer-mypoints-label",
    "type": "symbol",
    "source": "mypoints",
    "minzoom": 12, // Set zoom level to whatever suits your needs
    "layout": {
        "text-field": "{name}",
        "text-anchor": "top",
        "text-offset": [0,0.5]
    }
});

यह मेरी जरूरतों के लिए वास्तव में अच्छी तरह से काम करने लगता है।

20/10/2016 को 13:04
का स्रोत उपयोगकर्ता

वोट
4

आप कई परतों नहीं करना चाहते हैं, वहाँ एक वैकल्पिक काम के आसपास है कि मैं का उपयोग है।

अपने मूल कोड को देखते हुए, आप उपयोग कर सकते हैं text-sizeज़ूम पर निर्भर के साथ संपत्ति stops:

map.addSource("mypoints", {
    type: "geojson",
    data: "mypoints.geojson",
});

map.addLayer({
    "id": "layer-mypoints",
    "type": "symbol",
    "source": "mypoints",
    "layout": {
        "icon-image": "marker-15",
        "text-field": "{name}",
        "text-anchor": "top",
        "text-size": {
            "stops": [
                [0, 0],
                [3, 0],
                [4, 10]
            ]
        }
    }
});

मूल्य, बंद हो जाता है के बीच अंतर्वेशित है तो जूम 0 और 3 के बीच text-size0 और 0 के बीच अंतर्वेशित है, में ... 0 (यानी अनुपस्थित) हो जाती है। ज़ूम 3 से यह पाठ जूम 4 (मैं प्रभाव पसंद है, लेकिन है कि व्यक्तिगत है), जब तक विस्तार के प्रभाव देता है। से ज़ूम 4 text-sizeसिर्फ 10 पर स्थिर हो जाएगा आप ज़ूम 3 और 4 के बीच "embiggening" प्रभाव नहीं करना चाहते हैं, तो आप भी एक भिन्नात्मक ज़ूम निर्दिष्ट कर सकते हैं: सिर्फ 3.1 4 बदल जाते हैं।

25/04/2017 को 23:23
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more