Mapbox GL - 如何在悬停时更改 geojson 线的宽度?
Mapbox GL - how to change the width of geojson line on hover?
我有一个 mapbox 地图,我在其中添加了各种 geojson 行。我这样添加它们
map.addSource('diklodartlo', diklodartlo);
map.addLayer({
'id': 'diklodartlo',
'type': 'line',
'source': 'diklodartlo',
'layout': {
'line-cap': 'round',
'line-join': 'round'
},
'paint': {
'line-opacity': 0.75,
'line-color': '#747474',
'line-width': 2
}
});
每条线还有一个相应的标记,悬停时会显示弹出窗口,其中包含有关路线的其他信息。 Now 我还想 "highlight" 相应的行 - 增加它的 "line-width" 以便用户知道选择了哪一行。
我的想法是从标记中获取 id 属性,将其与行的 id 属性 配对,然后更改行 "line-width"。但说起来容易做起来难 - 我知道如何获取所选标记的 属性,但不知道如何访问图层并在运行时更改线条的宽度。有人可以告诉我该怎么做吗?
非常感谢...
所以这毕竟很简单,mapbox 有一个属性。
https://docs.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty
看起来像这样:
map.setPaintProperty(//hovered trail//, 'line-width', //desired width//);
我有一个 mapbox 地图,我在其中添加了各种 geojson 行。我这样添加它们
map.addSource('diklodartlo', diklodartlo);
map.addLayer({
'id': 'diklodartlo',
'type': 'line',
'source': 'diklodartlo',
'layout': {
'line-cap': 'round',
'line-join': 'round'
},
'paint': {
'line-opacity': 0.75,
'line-color': '#747474',
'line-width': 2
}
});
每条线还有一个相应的标记,悬停时会显示弹出窗口,其中包含有关路线的其他信息。 Now 我还想 "highlight" 相应的行 - 增加它的 "line-width" 以便用户知道选择了哪一行。 我的想法是从标记中获取 id 属性,将其与行的 id 属性 配对,然后更改行 "line-width"。但说起来容易做起来难 - 我知道如何获取所选标记的 属性,但不知道如何访问图层并在运行时更改线条的宽度。有人可以告诉我该怎么做吗?
非常感谢...
所以这毕竟很简单,mapbox 有一个属性。
https://docs.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty
看起来像这样:
map.setPaintProperty(//hovered trail//, 'line-width', //desired width//);