我有一个包含点和多边形的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过滤掉polys并映射点时,它可以正常工作。我的想法不多了,在JSON章节中,Leaflet文档非常稀缺...我只需要一种方法即可将if放入pointToLayer代码中,将点与多边形分离,并将它们全部映射为点。
提前致谢!
有任何想法吗?
似乎没有合适的挂钩。
乍一看,您似乎可以对传递给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
确定质心/中心或您要使用的任何内容的功能在哪里。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句