Question

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

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

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

提前致谢！

有什么想法吗？

Answer 1

似乎没有合适的钩子。

乍一看，您似乎可以改变传递给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是确定质心/中心或您想要使用的任何函数。

Answer 2

这是工作代码：

var myRequest = new Request('/UrbanSyntax/Desarrollo/twitter/data/boxtest.json');

fetch(myRequest).then(function(response) {
  return response.json().then(function(json) {

    json.features.forEach(function (feature) {
      if (feature.geometry.type === "Polygon") {

        feature.polygonGeometry = feature.geometry;

        var centroid = gju.rectangleCentroid(feature.geometry);

        feature.geometry = {
          coordinates: centroid.coordinates,
          type: "Point"
        };
      }
    });

    geoJsonLayer = new L.GeoJSON(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
        );
      }
    });

    geoJsonLayer.addTo(map);

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

2 个答案: