如何在Leaflet中为GeoJSON多边形添加随图层显隐的居中标记

我来帮你实现这个需求！核心思路是把每个多边形的居中标记和对应图层绑定，然后通过监听图层控件的开关事件来控制标记的显示与隐藏。下面是修改后的完整代码和详细说明：

步骤1：修改GeoJSON图层的创建逻辑 #

在onEachFeature函数里，我们不仅创建标记，还把它关联到多边形图层上，但暂时不添加到地图：

var geoJsonLayer = L.geoJSON(Locations, {
  onEachFeature: function (feature, layer) {
    if (feature.geometry.type === "Polygon") {
      var bounds = layer.getBounds();
      var center = bounds.getCenter();
      var markerTitle = feature.properties.ItemId;
      layer.id = markerTitle;
      
      // 创建居中标记，可自定义样式
      var centerMarker = L.marker(center, {
        title: markerTitle
        // 如需自定义图标，可添加：icon: customMarkerIcon
      });
      
      // 将标记绑定到多边形图层，方便后续控制显示隐藏
      layer.centerMarker = centerMarker;
      
      var popUpFormat = dataPopUp(feature);
      layer.bindPopup(popUpFormat, customPopUpOptions);
    }
  },
});

步骤2：创建图层控件并绑定开关事件 #

假设你已经用L.control.layers创建了图层控件，我们需要监听它的overlayadd和overlayremove事件，来控制标记的显示：

// 替换成你实际的基础图层和覆盖图层配置
var baseLayers = {
  "基础地图": baseMapLayer
};
var overlayLayers = {
  "多边形图层": geoJsonLayer
};

// 创建并添加图层控件到地图
var layerControl = L.control.layers(baseLayers, overlayLayers).addTo(map);

// 监听图层激活事件：打开多边形图层时，显示所有对应标记
layerControl.on('overlayadd', function(e) {
  if (e.layer === geoJsonLayer) {
    geoJsonLayer.eachLayer(function(layer) {
      if (layer.centerMarker) {
        layer.centerMarker.addTo(map);
      }
    });
  }
});

// 监听图层关闭事件：关闭多边形图层时，移除所有对应标记
layerControl.on('overlayremove', function(e) {
  if (e.layer === geoJsonLayer) {
    geoJsonLayer.eachLayer(function(layer) {
      if (layer.centerMarker) {
        map.removeLayer(layer.centerMarker);
      }
    });
  }
});

步骤3：处理初始加载状态 #

如果你的多边形图层默认是添加到地图上的（比如创建后直接addTo(map)），别忘了在初始化时手动显示所有标记：

// 若图层默认已加载，初始化显示所有居中标记
if (map.hasLayer(geoJsonLayer)) {
  geoJsonLayer.eachLayer(function(layer) {
    if (layer.centerMarker) {
      layer.centerMarker.addTo(map);
    }
  });
}

额外优化：自定义标记样式 #

如果需要让标记更贴合需求，可以自定义图标，比如用小圆圈或自定义图片：

// 示例：创建自定义图标
var customMarkerIcon = L.icon({
  iconUrl: 'marker-icon.png',
  iconSize: [20, 20],
  iconAnchor: [10, 10] // 让图标中心精准对准多边形中心
});

// 创建标记时使用自定义图标
var centerMarker = L.marker(center, {
  title: markerTitle,
  icon: customMarkerIcon
});

这样修改后，当你通过图层控件打开多边形图层时，所有多边形的居中标记会自动显示；关闭图层时，标记也会随之隐藏，完全符合你的需求！

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