Преобразовать многоугольник GeoJSON в точку перед рисунком в Листовой карте

Question

У меня есть набор данных 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 ) 
} 
}); 

Большинство данных являются многоугольники, но мне нужно, чтобы перевести их в точках (многоугольник центр), чтобы упростить карту. Я не хочу менять оригинальный GeoJSON, когда он анализируется, поскольку эти многоугольники могут понадобиться позже.

Я не знаю, где «ввести» код, чтобы прочитать границы полигона, вычислить центр и отправить latlng, чтобы сделать кругник. Как и сейчас, код считывает точки и полигоны в json ok, но в данных слишком много полигонов, поэтому браузер зависает. Все работает правильно, когда я отфильтровываю поля из JSON и просто набираю точки. У меня заканчиваются идеи, а документации в лифлетах так мало в главе JSON ... Мне просто нужен способ поставить , если в код pointToLayer, отделить точки от polys и отобразить их все как точки.

Заранее благодарен!

Любые идеи?

Answer 1

Кажется, что нет подходящего крючка.

На первый взгляд кажется, что вы могли бы мутировать GeoJSON, который передан функции опций style, но Leaflet уже создал на этом этапе свой собственный объект/слой, поэтому никакой мутации не будет.

Чтобы решить эту проблему, вы можете выполнить свой собственный сетевой запрос и изменить данные до их передачи на уровень GeoJSON.

Если вы ориентируетесь современные браузеры, вы можете использовать fetch или один из его polyfills:

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