如何更改具有数百条道路的 Mapbox 图层上一条道路的颜色？

Question

我在 Mapbox 的图层上显示了一个道路网络。在给定的单个路段的 mouseenter 上，我想将其更改为 line-color。我能够成功地将所有道路作为一个整体一起更改，但是如何定位单个路段并更改其颜色？

我试过这样的事情，但没有找到针对个别路段的运气：

map.on('mouseenter', 'road-street', (e) => {
  map.getCanvas().style.cursor = 'pointer';
  let uniqueId = "road-" + String(Date.now());
  e.features[0].layer.id = uniqueId;
  map.setPaintProperty(e.features[0].layer.id, 'line-color', '#0099ff');
});

但这会产生一个 Object Error

Answer 1

Mapbox Streets 中的 road-street 等图层不包含可让您轻松为它们单独着色的唯一属性（例如 ID）。但是，它们确实具有独特的几何形状（有一些警告：单个特征的几何形状不一定是整条道路，或者您期望找到的“道路”）。

你可以这样做：

创建类型为 line

selected-road

创建类型为 line 的单独层 selected-road，连接到源。
当用户 clicks/hovers 时，像这样更新它的几何结构：

map.getSource('selected-road').setData(e.features[0].geometry)

如何更改具有数百条道路的 Mapbox 图层上一条道路的颜色？

How can I change the color of one single road on a Mapbox layer that has hundreds of roads?

mapbox