search

mapbox-developer-group / Mapbox-Tech-Q-A

在提问之前请自行查看文档哦，养成好习惯：https://docs.mapbox.com/
32 stars 1 forks source link

鼠标点击按钮，如何更改 symbol 的 icon ？ #8

Open Jing-flyloveyin opened 5 years ago

Jing-flyloveyin commented 5 years ago

有前辈知道如何实现：鼠标点击按钮，更改symbol的icon吗？

image

image

提问者：Mapbox 开发者社区 @Gkm

crazykay commented 5 years ago

this.map.getSource('point1').setData(GEO__JSON)

Example: $0.mapbox.getSource('points').setData({ "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-77.03238901390978, 38.913188059745586] }, "properties": { "title": "Mapbox DC", "icon": "monument" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-122.414, 37.776] }, "properties": { "title": "Mapbox SF", "icon": "harbor" } }] })

shiyuan598 commented 5 years ago

点击的callback中重新设置icon： map.setLayoutProperty(layerId, 'icon-image', imgName)

IceiceZhou commented 5 years ago

Hi @gkm (or @Jing-flyloveyin Jing-flyloveyin)

根据您的问题和您提供的代码截图，我推荐您两种解决方案： 1.调用API setlayoutproperty 对“layout”节点中“icon-image”的值进行修改。该值的变化会影响最终的显示，具体信息请参考 layout-symbol-icon-image。

FYI Code： map.setLayoutProperty(‘point1’, 'icon-image', imgName)

2.根据您现有代码截图显示，当前symbol的icon 由当前 feature的“icon”属性值来确定，目前将显示为”theatre-15“。您可以通过更改feature的‘icon’属性，以达到其切换效果。更多详情请参考 setfeaturestate

任何问题请告诉我们！