在Leaflet Map中绘制之前将GeoJSON多边形转换为点

我有一个GeoJSON数据集,它有点和多边形.我有一个简单的Leaflet代码,可以将它们读入地图,如下所示:

var MyLayer = new L.GeoJSON.AJAX("/UrbanSyntax/Desarrollo/twitter    /data/boxtest.json", {

pointToLayer: function(feature, latlng) {      
return new L.CircleMarker(latlng, {
  radius: 3,
  fillOpacity: 0.75,
  color: getColor(feature.properties.created_at)
});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(
  feature.properties.created_at + '
'
  + feature.geometry.coordinates + '
'
  + feature.properties.user  )
}
});

大多数数据都是多边形,但我需要将它们转换为点(多边形中心)以简化地图.我不希望在解析时更改原始GeoJSON,因为稍后可能需要这些多边形.

我不知道在哪里"注入"代码来读取多边形边界,计算一个中心并发送一个latlng来制作一个圆圈标记.就像现在一样,代码读取json中的点和多边形确定,但数据中的多边形太多,因此浏览器会冻结.当我从JSON过滤掉多边形并只映射点时,它可以正常工作.我的想法已经用完了,在JSON章节中,Leaflet文档非常缺乏......我只需要在pointToLayer代码中放置一个if,将点与多边形分开,并将它们全部映射为点.

提前致谢!

有任何想法吗？

似乎没有合适的钩子.

乍一看,似乎你可能会改变传递给style选项函数的GeoJSON ,但是Leaflet已经在那个阶段创建了自己的特征/图层,所以任何突变都没有效果.

要解决此问题,您可以执行自己的网络请求并在将数据传入GeoJSON层之前修改数据.

如果您要定位现代浏览器,则可以使用fetch或使用其中一个填充:

fetch('/UrbanSyntax/Desarrollo/twitter/data/boxtest.json')
.then(function (response) {
    return response.json();
})
.then(function (geoJson) {
  geoJson.features.forEach(function (feature) {
    if (feature.geometry.type === "Polygon") {
      // Copy the polygon geometry and replace it with a
      // point at the polygon's centroid.
      feature.polygonGeometry = feature.geometry;
      feature.geometry = {
        coordinates: getCentroid(feature.polygonGeometry),
        type: "Point"
      };
    }
  });
  geoJsonLayer = new L.GeoJSON(geoJson, {
    pointToLayer: function(feature, latlng) {      
      return new L.CircleMarker(latlng, {
        radius: 3,
        fillOpacity: 0.75,
        color: getColor(feature.properties.created_at)
      });
    },
    onEachFeature: function(feature, layer) {
      layer.bindPopup(
        feature.properties.created_at + '
'
        + feature.geometry.coordinates + '
'
        + feature.properties.user);
    }
  });
  geoJsonLayer.addTo(map);
});