在傳單地圖中繪制之前將GeoJSON多邊形轉換為指向點

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，因為以后可能需要這些多邊形。

我不知道在哪里“注入”代碼以讀取多邊形邊界，計算中心並發送latlng來制作圓形標記。 現在，代碼讀取json ok中的點和多邊形，但是數據中的多邊形太多，因此瀏覽器凍結。 當我從JSON過濾掉多邊形並映射點時，它可以正常工作。 我的想法不多了，在JSON章節中，Leaflet文檔非常稀缺...我只需要一種方法即可將if放入pointToLayer代碼中，將點與多邊形分離，並將它們全部映射為點。

提前致謝！

有任何想法嗎？

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);