在Leaflet中如何将图标标记放置在多边形的中心位置

以下提供两种可直接落地的实现方式，可根据项目场景选择：

方案1：使用Leaflet原生API实现（无需额外依赖） #

适用普通无洞多边形场景，通过多边形外接矩形计算中心点，无需引入第三方库：

// 替换为自己的地图实例即可
const map = L.map('map').setView([52.34, -1.12], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 你提供的GeoJSON示例数据
const geoJson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-1.127471923828125,52.347504844796546],
            [-1.130218505859375,52.34456858538671],
            [-1.1446380615234375,52.343939361569554],
            [-1.1391448974609375,52.33261180150486],
            [-1.1188888549804688,52.33114320164082],
            [-1.1079025268554688,52.331772607553205],
            [-1.1085891723632812,52.343519874049804],
            [-1.127471923828125,52.347504844796546]
          ]
        ]
      }
    }
  ]
};

// 加载GeoJSON并添加中心标记
L.geoJSON(geoJson, {
  onEachFeature: function(feature, layer) {
    // 直接获取多边形外接矩形的中心点
    const center = layer.getBounds().getCenter();
    // 可自定义icon替换默认标记样式
    L.marker(center).addTo(map);
  }
}).addTo(map);

方案2：计算几何质心（精度更高，适配复杂多边形） #

如果是不规则多边形、带空洞或者多部件多边形，外接矩形中心可能和实际几何质心有偏差，可通过计算标准几何质心实现更精准的定位，只需在项目中引入Turf.js依赖即可：

L.geoJSON(geoJson, {
  onEachFeature: function(feature, layer) {
    // 从GeoJSON特征直接计算几何质心
    const centroid = turf.centroid(feature);
    const centerCoords = centroid.geometry.coordinates;
    // Turf返回坐标顺序为[经度,纬度]，Leaflet需要[纬度,经度]，翻转顺序即可
    L.marker([centerCoords[1], centerCoords[0]]).addTo(map);
  }
}).addTo(map);

补充说明 #

• 如需自定义图标样式，可通过L.icon方法配置后传入L.marker的第二个参数
• 带洞、多部件多边形优先使用方案2，定位精度更高

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