如何使用 Mapbox 设置单个点的样式？

Question

我正在构建一个基于 Mapbox 的网络应用程序，并希望显示有关表格中点子集的更多信息，然后能够选择表格中的一行（对应于地图上的一个点）并突出显示该点通过选择表中的行在地图上。我通过 Node.js 服务器选择当前视图中的点，然后用这些点填充 DataTables 表。理想情况下，然后我可以单击 DataTable 中的行并相应地设置相应的点。有没有办法做到这一点？谢谢！

Answer 1

您没有提供有关如何设置地图的太多信息，但我假设您有一个数据源（GeoJSON 或矢量切片）和一个当前显示所有点的图层。 （我不确定“DataTables 表”是什么意思）。

有两种方法

带有高光层

假设每一行都有一个名为placeNumber 的属性。

1：创建高光层：

map.addLayer({ 
  id: 'place-highlight',
  type: 'circle', 
  source: mysource,
  paint: {
    'fill-color': 'yellow',
    'circle-radius: '20',
    'fill-opacity': 0.5
  },
  filter: ['==', 'placeNumber', -1]
});

2：更新过滤器：

map.setFilter('place-highlight', ['==', 'placeNumber', selectedPlaceNumber]);

使用 SetFeatureState

要完成这项工作，您需要能够访问所选功能的 FeatureID。

点击该行时：

map.setFeatureState({ source: 'place', id: previousSelectedFeatureId }, { selected: false })
map.setFeatureState({ source: 'place', id: selectedFeatureId }, { selected: true })
previousSelectedFeatureId = selectedFeatureid;

并在您的绘画属性中使用特征状态：

paint: {
   'circle-color': ['case',
      ['==', ['feature-state', 'selected'], true], 'yellow',
      'black'
      ]
}

也就是说，“对于具有“选定”特征状态true 的点，圆圈颜色为黄色，否则为黑色。