Как изменить цвет и значок маркера при нажатии маркера в mapbox?

Question

Я новичок в Mapbox. Я создал пользовательскую карту стиля в студии boxbox, а затем добавлю маркеры с помощью 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 

}); 

Теперь я хочу, чтобы изменить цвет маркера по нажатию любой из маркера, чтобы отобразить выбранный маркер. Спасибо заранее.

Answer 1

Благодарим за вопрос!

Вы найдете этот пример полезный при реализации функциональности вы запрошенная: https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

Основной рабочий процесс выглядит следующим образом:

• создать два слоя маркеров: один, который отображает маркеры в подсвеченном стиль и тот, который отображает маркеры в выделенном стиле
• скрыть все маркеры от выделенного стилизованного слоя с помощью фильтра
• прослушать click ev лор
• найти маркер под курсором с помощью queryRenderedFeatures
• отобразить маркер на выделенном слое с использованием фильтра

Мы работаем над тем, чтобы сделать этот процесс более простым!