MapBox जीएल परिवर्तन आइकन रंग

वोट
12

वहाँ एक MapBox-जीएल-js आइकन की छवि रंग बदलने के लिए कोई तरीका है?

से लिया इस कोड https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ लाल करने के लिए मार्कर रंग नहीं बदलेगा

map.addLayer({
    id: markers,
    type: symbol,
    source: markers,
    layout: {
        icon-image: {marker-symbol}-15,
        text-field: {title},
        text-font: [Open Sans Semibold, Arial Unicode MS Bold],
        text-offset: [0, 0.6],
        text-anchor: top
    },
    paint: {
        text-size: 12,
        icon-color : #ff0000
    }
});

मैं सभी विकल्पों को आधिकारिक दस्तावेज में सूचीबद्ध की कोशिश की है

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


3 जवाब

वोट
6

मैं एक जवाब मिल गया। आप विशेष रूप से यह काम करने के लिए एसडीएफ माउस की जरूरत है।

https://github.com/mapbox/mapbox-gl-js/issues/1594

Unfortunately we don't have a turnkey solution for generating sdf icons but you can see an example of how its done in the maki project

https://github.com/mapbox/maki/blob/mb-pages/sdf-render.js

https://github.com/mapbox/mapbox-gl-js/issues/161

24/12/2015 को 23:19
का स्रोत उपयोगकर्ता

वोट
1

आप अपने खुद के पूर्व रंग का बाहरी प्रतीक इस्तेमाल कर सकते हैं (या मक्खी पर रंग वाले उत्पन्न) के रूप में icon-imageहै, तो आप का उपयोग करें map.loadImage()और map.addImage()पहले।

उदाहरण:

नक्शा करने के लिए एक चिह्न जोड़ें

नक्शे के लिए एक उत्पन्न चिह्न जोड़ें

17/05/2017 को 00:33
का स्रोत उपयोगकर्ता

वोट
1

समस्या MapBox केवल आप माउस जो एसडीएफ में हैं रंग करने के लिए अनुमति देता है (हस्ताक्षरित दूरी समारोह) प्रारूप।

आइकन रंग आइकन का रंग। यह केवल एसडीएफ माउस के साथ प्रयोग किया जा सकता है।

यहाँ इसके बारे में एक छोटे से प्रलेखन है। GitHub पोस्ट की तरह यह केवल के लिए सीमित है का कहना है कि एक रंग । एक PNG फ़ाइल के बाहर एक एसडीएफ फ़ाइल हो रही MapBox में बहुत आसान है।

के प्रलेखन addImage समारोह आपको बताता है कि आप एक वैकल्पिक विकल्प परमाटर जो एसडीएफ और pixelRatio शामिल कर सकते हैं जोड़ सकते हैं।

तो तुम सब करने की है कुछ इस तरह है:

        map.loadImage(imageURL, function(error0, image0) {
            if (error0) throw error0;
            map.addImage("image", image0, {
                "sdf": "true"
            });

            map.addLayer({
                "id": "Layer1",
                "type": "symbol",
                "source": "places",
                "layout": {
                    "icon-image": "image",
                    "icon-allow-overlap": true,
                },
                "paint": {
                    "icon-color": "#00ff00",
                    "icon-halo-color": "#fff",
                    "icon-halo-width": 2
                }
            });
        });
01/01/2019 को 16:56
का स्रोत उपयोगकर्ता

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