कैसे MapBox में एक मार्कर क्लिक पर मार्कर रंग और चिह्न बदलने के लिए?

वोट
2

मैं MapBox के लिए नया हूँ। मैं MapBox स्टूडियो में एक कस्टम शैली नक्शा बना लेते हैं और उसके बाद GeoJSON का उपयोग कर मार्करों जोड़ें। यहाँ नमूना कोड है:

mapboxgl.accessToken = 'pk.eyJ1Ijoic2Fua3ljc2Uhhcc.mb22KHuonjywQ-eaWQ';
var map = new mapboxgl.Map({
container: 'map_geo',
style: 'mapbox://styles/abcd/cipjtsdhyh04ebam5tndf4jaj',
zoom: 3.7,
center: [81.30, 22.76]
});
var geoJson = {
type: FeatureCollection,
 features: [{
     type: Feature,
    properties: {
        title: Nagpur,
          description: Nagpur,
         marker-symbol: marker,
     },
    geometry: {
         coordinates: [79.0882, 21.1845],
         type: Point
    },
    id: 223e9579f03849c87abec10dfed64c37
 }, {
    type: Feature,
    properties: {
        title: Lucknow,
        description: Lucknow,
        marker-symbol: marker,
    },
    geometry: {
        coordinates: [80.9462, 26.8467],
        type: Point
    },
    id: 2cc757705489152c8bccb33635708427
 }]
};

map.on('load', function () {
map.addSource(markers, {
    type: geojson,
    data: geoJson

});

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: 16,
            text-color: #fff,
        }
});
});
map.scrollZoom.disable();
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['markers']    });

if (!features.length) {
    return;
}

// here I want to change the marker color to highlight the selected marker

});

अब मैं चयनित मार्कर प्रदर्शित करने के लिए मार्कर के किसी भी क्लिक करने पर मार्कर रंग बदलना चाहते हैं। अग्रिम में धन्यवाद।

28/06/2016 को 05:41
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
2

प्रश्न के लिए धन्यवाद!

: आप इस उदाहरण आपके द्वारा अनुरोध किया कार्यक्षमता को लागू करने में सहायक होगी https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

बुनियादी कार्यप्रवाह इस प्रकार है:

  • मार्कर की दो परतों बनाने के लिए: एक है कि हाइलाइट नहीं किया गया शैली में मार्कर को प्रदर्शित करता है और एक कि हाइलाइट किए गए शैली में मार्कर को प्रदर्शित करता है
  • एक फिल्टर का उपयोग कर प्रकाश डाला शैली वाली परत से सभी मार्करों छिपाने
  • के लिए सुनने clickघटना
  • कर्सर के अंतर्गत मार्कर का उपयोग लगता है queryRenderedFeatures
  • एक फिल्टर का उपयोग कर हाइलाइट किए गए परत पर मार्कर प्रदर्शित

हम तरीके से इस प्रक्रिया को और अधिक सरल बनाने के लिए काम कर रहे हैं!

28/06/2016 को 17:06
का स्रोत उपयोगकर्ता

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