Konvertieren GeoJSON Polygon zu Punkt vor dem Zeichnen in Leaflet Map

Question

Ich habe ein GeoJSON-Datensatz, der Punkte und Polygone hat. Ich habe eine einfache Leaflet-Code, der sie in eine Karte liest, wie folgt aus:

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

Die meisten Daten sind Polygone, aber ich brauche sie, um Punkte (das Polygon Mitte) zu übersetzen, die Karte zu vereinfachen. Ich möchte das ursprüngliche GeoJSON nicht ändern, wenn es geparst wird, da diese Polygone möglicherweise später benötigt werden.

Ich weiß nicht, wo man Code "einspeist", um die Polygongrenzen zu lesen, ein Zentrum zu berechnen und ein latlng zu senden, um einen circemarker zu machen. Wie es jetzt ist, liest der Code die Punkte und Polygone in der JSON-OK, aber es gibt zu viele Polygone in den Daten, so dass der Browser einfriert. Es funktioniert in Ordnung, wenn ich die Polys aus dem JSON herausfiltern und nur die Punkte zuordnen. Ich habe keine Ideen mehr, und Leaflet Dokumentation ist so knapp in der JSON-Kapitel ... Ich brauche nur eine Möglichkeit, eine wenn im PointToLayer-Code, trennen Sie die Punkte von den Polys, und ordnen Sie alle als Punkte.

Vielen Dank im Voraus!

Irgendwelche Ideen?

Answer 1

Es scheint keinen geeigneten Haken zu geben.

Auf den ersten Blick scheint es möglich zu sein, den GeoJSON, der an die Funktion style übergeben wurde, zu mutieren, aber Leaflet hat zu diesem Zeitpunkt bereits ein Feature/Layer erstellt, so dass jede Mutation keinen Effekt hat.

Um das Problem zu lösen, könnten Sie Ihre eigene Netzwerkanforderung ausführen und die Daten ändern, bevor sie an die GeoJSON-Schicht übergeben werden.

Wenn Sie moderne Browser zielen, könnten Sie fetch oder eines seiner polyfills verwenden:

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

Wo getCentroid ist eine Funktion, die den Schwerpunkt/Zentrum oder was auch immer Sie verwenden möchten, bestimmt.

Answer 2

Dies ist der Arbeitscode:

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