Question

我正在基于Mapbox构建一个Web应用程序，并希望显示有关表中点子集的更多信息，然后能够在表中选择一行（与地图上的点相对应）并突出显示该点通过选择表格中的行在地图上显示。我通过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”“选定”特征状态的点，圆形颜色为黄色，否则为黑色”。

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

1 个答案:

带有高亮层

使用SetFeatureState