如何从GeoJSON地图获取点击polygon的ID，高亮对应ID的HTML表格行

整体交互分为两步：首先从地图点击事件中拿到polygon携带的ID值，再用ID匹配表格行触发高亮。

1. 获取点击polygon的ID值 #

根据你使用的地图库，对应绑定事件获取ID即可，以下是主流地图库的实现示例：

• 如果你使用Leaflet

L.geoJSON(你的GeoJSON数据, {
  onEachFeature: function(feature, layer) {
    // 给每个polygon绑定点击事件
    layer.on('click', function(e) {
      // 从polygon的属性中取ID，字段名替换为你实际的字段名即可
      const clickedId = feature.properties.id;
      // 调用弹窗方法、表格高亮方法
      showPopup(feature.properties);
      highlightTableRow(clickedId);
    })
  }
}).addTo(map);

• 如果你使用Mapbox GL JS

// 给GeoJSON图层绑定点击事件，第一个参数替换为你自己的图层ID
map.on('click', '你的GeoJSON图层ID', function(e) {
  const feature = e.features[0];
  const clickedId = feature.properties.id;
  showPopup(feature.properties, e.lngLat);
  highlightTableRow(clickedId);
});
// 可选优化：hover到polygon时鼠标改成指针样式
map.on('mouseenter', '你的GeoJSON图层ID', () => map.getCanvas().style.cursor = 'pointer');
map.on('mouseleave', '你的GeoJSON图层ID', () => map.getCanvas().style.cursor = '');

• 如果你使用OpenLayers

map.on('singleclick', function(e) {
  map.forEachFeatureAtPixel(e.pixel, function(feature) {
    const clickedId = feature.get('id');
    showPopup(feature.getProperties(), e.coordinate);
    highlightTableRow(clickedId);
  })
});

2. 实现表格行高亮 #

首先给表格每一行加自定义属性data-id存储对应ID，方便快速匹配：

<table id="data-table">
  <thead>
    <tr><th>ID</th><th>其他字段</th></tr>
  </thead>
  <tbody>
    <tr data-id="123456789"><td>123456789</td><td>xxx</td></tr>
    <tr data-id="987654321"><td>987654321</td><td>yyy</td></tr>
  </tbody>
</table>

先加高亮样式：

.table-highlight {
  background-color: #fff3cd;
  font-weight: bold;
}

写对应的高亮JS方法：

function highlightTableRow(targetId) {
  // 先清空所有行的高亮状态
  document.querySelectorAll('#data-table tbody tr').forEach(row => {
    row.classList.remove('table-highlight');
  });
  // 匹配对应ID的行添加高亮
  const targetRow = document.querySelector(`#data-table tbody tr[data-id="${targetId}"]`);
  if (targetRow) {
    targetRow.classList.add('table-highlight');
    // 可选：如果表格太长，自动滚动到对应行位置
    targetRow.scrollIntoView({behavior: 'smooth', block: 'center'});
  }
}

• 确保GeoJSON属性里的ID、表格行data-id属性值、表格ID列的内容三者完全一致，避免匹配失败
• 如果ID是数字类型，建议统一转成字符串处理，避免类型不匹配导致的匹配失败

内容的提问来源于stack exchange，提问作者Phil Gee