javascript - 在传单 map 中绘制之前将 GeoJSON 多边形转换为点

Question

我有一个包含点和多边形的 GeoJSON 数据集。我有一个简单的传单代码，可以将它们读入 map ，如下所示:

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 + '<br />'
  + feature.geometry.coordinates + '<br />'
  + feature.properties.user  )
}
});

大部分数据都是多边形，但我需要将它们转换为点(多边形中心)以简化 map 。我不想在解析原始 GeoJSON 时更改它，因为以后可能需要这些多边形。

我不知道在哪里“注入(inject)”代码来读取多边形边界、计算中心并发送 latlng 来制作圆圈标记。就像现在一样，代码读取 json 中的点和多边形 ok，但数据中的多边形太多，因此浏览器卡住。当我从 JSON 中过滤掉多边形并仅映射点时，一切正常。我的想法用完了，传单文档在 JSON 章节中非常稀缺......我只需要一种在 pointToLayer 代码中放置 if 的方法，将点与多边形分开，并将它们全部映射为点。

提前致谢!

有什么想法吗？

Answer 1

似乎没有合适的钩子(Hook)。

乍一看，你似乎可以改变传递给 style 选项函数的 GeoJSON，但 Leaflet 已经在那个阶段创建了自己的特征/层，所以任何改变没有影响。

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

如果您的目标是现代浏览器，您可以使用 fetch或其 polyfill 之一:

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 + '<br />'
        + feature.geometry.coordinates + '<br />'
        + feature.properties.user);
    }
  });
  geoJsonLayer.addTo(map);
});

getCentroid 是确定质心/中心或您希望使用的任何内容的函数。