Javascript 在单张地图中绘制之前，将GeoJSON多边形转换为点

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

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

var MyLayer=new L.GeoJSON.AJAX（“/UrbanSyntax/desarrolo/twitter/data/boxtest.json”{
pointToLayer:函数（特性，latlng）{
返回新的L.CircleMarker（latlng{
半径：3，
填充不透明度：0.75，
颜色：getColor（feature.properties.created_at）
});
},
onEachFeature：功能（功能，图层）{
图层绑定弹出窗口(
feature.properties.created_位于+'
'
+feature.geometry.coordinates+“
”
+feature.properties.user）
}
});

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

我不知道在哪里“注入”代码来读取多边形边界，计算一个中心并发送一个板条来制作一个圆标记器。 现在，代码读取json ok中的点和多边形，但数据中的多边形太多，因此浏览器冻结。 当我从JSON中过滤出多边形并只映射点时，它可以正常工作。 我已经没有想法了，而JSON一章中的传单文档非常稀少。。。 我只需要在pointToLayer代码中添加一个if，将点与多边形分开，并将它们全部映射为点

提前谢谢

---

有什么想法吗

似乎没有合适的挂钩

乍一看，您似乎可以对传递给

样式

选项的函数的GeoJSON进行变异，但在该阶段，传单已经创建了自己的功能/层，因此任何变异都没有效果

为了解决这个问题，您可以执行自己的网络请求，并在数据传递到GeoJSON层之前修改数据

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

fetch（'/UrbanSyntax/desarrolo/twitter/data/boxtest.json'）
.然后（功能（响应）{
返回response.json（）；
})
.then（函数（geoJson）{
geoJson.features.forEach（函数（功能）{
如果（feature.geometry.type==“Polygon”）{
//复制多边形几何体并将其替换为
//指向多边形的质心。
feature.PolygongGeometry=feature.geometry；
feature.geometry={
坐标：getCentroid（特征：多边形几何），
类型：“点”
};
}
});
geoJsonLayer=新的L.GeoJSON（GeoJSON{
pointToLayer:函数（特性，latlng）{
返回新的L.CircleMarker（latlng{
半径：3，
填充不透明度：0.75，
颜色：getColor（feature.properties.created_at）
});
},
onEachFeature：功能（功能，图层）{
图层绑定弹出窗口(
feature.properties.created_位于+'
'
+feature.geometry.coordinates+“
”
+特征。属性。用户）；
}
});
geoJsonLayer.addTo（map）；
});

---

其中

getCentroid

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

这是工作代码：

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

var myRequest=new请求（'/UrbanSyntax/desarrolo/twitter/data/boxtest.json'）；
fetch（myRequest）.then（函数（响应）{
返回response.json（）.then（函数（json）{
forEach（函数（特性）{
如果（feature.geometry.type==“Polygon”）{
feature.PolygongGeometry=feature.geometry；
var形心=gju.矩形形心（特征.几何）；
feature.geometry={
坐标：形心坐标，
类型：“点”
};
}
});
geoJsonLayer=新的L.GeoJSON（json{
pointToLayer:函数（特性，latlng）{
返回新的L.CircleMarker（latlng{
半径：3，
填充不透明度：0.75，
颜色：getColor（feature.properties.created_at）
});
},
onEachFeature：功能（功能，图层）{
图层绑定弹出窗口(
feature.properties.created_位于+'
'
+feature.geometry.coordinates+“
”
+feature.properties.user
);
}
});
geoJsonLayer.addTo（map）；

我注意到你在gis.stackexchange.com上有。交叉发布是。哦，抱歉！看起来很有希望，明天会测试！“很有希望”-很好的双关语！我让它工作了，非常感谢！因为我得到了一个空的（无效）回迁部分，所以我不得不更改回迁部分对象。我发现了另一个抓取示例，setup geojson utils（很棒！），多亏了您的代码，它现在可以工作了！修复了错误：关于

response.json（）

promise.

fetch

API与Angular 2 HTTP客户端的API很接近，但不完全相同-因此产生了混淆/错误。