Comment utiliser centroid

Bjr,

Je dispose de X_CENTROID et Y_CENTROID dans les properties des polygones d'un geojson.
Comment s'en servir pour placer un marker au barycentre de mes polygones ?
Merci

montrez nous un exemple de code.

Dans un geoJSON des départements je trouve

Code:

---

1 2 3 4 5 6 7

[{"type":"FeatureCollection","features": [{"type":"Feature","properties":{"ID_GEOFLA":4,"CODE_DEPT":"04","name":"ALPES-DE-HAUTE-PROVENCE","CODE_CHF":"070","NOM_CHF":"DIGNE-LES-BAINS","X_CHF_LIEU":9590,"Y_CHF_LIEU":63379, "X_CENTROID":9596,"Y_CENTROID":63394, "CODE_REG":"93","NOM_REGION":"PROVENCE-ALPES-COTE D'AZUR","population":120.456}, "geometry":{"type":"Polygon","coordinates":[[[6.63,43.78],[6.62,43.8], bla bla bla ... ]]}}

---

Je voudrais utiliser ces références pour placer un marker au "centre" de chaque département.

Mais je ne comprends pas la manière d'utiliser

Code:

---

getCenter()

---

ou

Code:

---

getBounds()

---

https://leafletjs.com/reference-1.7.1.html#polyline-getcenter

Si c'est bien ce qu'il faut ...

les propriétés du geojson sont des données libres qui ne sont pas utilisées par la carte.
mais par contre vous pouvez lire le tableau de propriétés en passant par l'argument "feature" par exemple

Code:

---

1 2 3

geoJSONLayer.eachLayer(function (e) { console.log(e["feature"]["properties"]); });

---

Bjr,

Je sais créer une fonction me permettant d'afficher des données dans un Layer. La question n'est pas là. Je me sers déjà de certaines propriétés dans une autre fonction pour faire une carte choroplèthe.

Ce que je cherche c'est la formule mathématique me permettant de trouver les coordonnées du barycentre de mon polygone grâce aux données fournies par :
X_CENTROID et Y_CENTROID.

Code:

---

1 2 3 4

var lat = f(X_CENTROID) var ln = f(Y_CENTROID) var marker = L.marker([lat, ln])

---

Merci de votre aide

Bonjour,

Citation:

---

Envoyé par augier26

Ce que je cherche c'est la formule mathématique me permettant de trouver les coordonnées du barycentre de mon polygone grâce aux données fournies par :
X_CENTROID et Y_CENTROID.

---

je n'en vois pas trop l’intérêt attendu que, si je ne m'abuse, les « centroids » exprime une distance en mètres par rapport aux bords du polygone ou quelque chose dans ce style.

Tu peux récupérer les données du polygone, dans ton JSON, tonJSON.geometry.coordinates, tu en crées un L.polygon que tu lies à la carte, via addTo(), ainsi tu peux récupérer le centre de celui-ci via la méthode getCenter() des L.polygon.

Ma fonction getCities parcourt déjà les propriétés de mon JSON

Code:

---

1 2 3 4 5 6 7 8 9

function getCities() { return [ {"bbox":[-5.1,41.36,9.55,51.08],"type":"FeatureCollection","features": [{"type":"FeatureCollection","features":[{ "type":"Feature","properties": {"name":"Berlin","description":"","cartodb_id":1,"created_at":"2013-09-03T12:32:04+0200","updated_at":"2013-09-03T12:32:04+0200","population":1}, "geometry":{"type":"MultiPolygon","coordinates":[[[[13.403528,52.540212], ... ]

---

Et je l'utilise avec

Code:

---

1 2 3 4

let geoJSONLayer = L.geoJson(cities, { style: style, onEachFeature: onEachFeature }).addTo(map);

---

pour obtenir :
https://essaillon-sederon.net/spip.php?article665

Comment ajouter ce marker là dedans ?

Je veux dire par là que je ne comprends pas du tout la sémantique à appliquer à getCenter... :oops:

D'après ce que je vois dans ton code tu pourrais faire comme suit :
• dans la récupération :

Code:

---

1 2 3 4 5

var cities = getCities(); let geoJSONLayer = L.geoJson(cities, { style: style, onEachFeature: onEachFeature })//.addTo(map); // on n'attache pas le layer à la map

---

• dans ta fonction onEachFeature :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function onEachFeature(feature, layer) { // on attache le layer à la map layer.addTo(map); // on récupére le centre const centroid = layer.getCenter(); // on attache un marker L.marker(centroid).addTo(map); // la suite de ton code layer.on({ mouseover: highlightFeature, mouseout: resetHighlight }); }

---

Tout simplement génial. C'est exactement ce que j'ai cherché en vain tout le WE.

Me reste juste à adapter l'icone du marker et à n'afficher ce dernier qu'en fonction de la propriété "population" avec un if adapté.

Merci de m'avoir permis d'accéder à une nvl fonction.

Suis pas très doué en anglais et n'ai pas tout compris sur l'aide de Leaflet
Dommage qu'il n'existe pas d'équivalent en français.

Désolé, me reste un pb.

Pour le département du Vaucluse, il y a 1 enclave.
https://essaillon-sederon.net/spip.php?article668
Il s'agit donc d'un multipolygon.

Mais la fonction

Code:

---

const centroid = layer.getCenter();

---

ne calcule le centroid QUE du premier polygone lu, sans tenir compte de l'ensemble du multipolygone.

Du coup le marker se retrouve dans l'Enclave, le reste du département n'est pas pris en compte...

Code:

---

1 2 3 4 5 6 7 8 9

{"type":"Feature","properties": {"ID_GEOFLA":85,"CODE_DEPT":"84","name":"VAUCLUSE","CODE_CHF":"007","NOM_CHF":"AVIGNON","X_CHF_LIEU":8451,"Y_CHF_LIEU":63182,"X_CENTROID":8753,"Y_CENTROID":63240,"CODE_REG":"93","NOM_REGION":"PROVENCE-ALPES-COTE D'AZUR","population":6}, "geometry":{"type":"MultiPolygon","coordinates":[ [ // Enclave des Papes [[4.89,44.36],[4.91,44.38],[4.91,44.4],[4.98,44.42],[5.01,44.41],[5.01,44.39],[5.04,44.38],[5.05,44.36],[5.02,44.36],[5.02,44.34],[5,44.33],[4.98,44.29],[4.89,44.31],[4.89,44.33],[4.87,44.34],[4.89,44.36]] ],[ // Département du Vaucluse (84) [[5.75,43.72],[5.71,43.69],[5.67,43.69],[5.6,43.65],[5.57,43.66],[5.53,43.65],[5.48,43.66],[5.44,43.68],[5.34,43.71],[5.28,43.74],[5.23,43.74],[5.18,43.73],[5.12,43.75],[5.09,43.77],[5.04,43.78],[5.04,43.8],[4.99,43.84],[4.93,43.88],[4.9,43.88],[4.88,43.9],[4.85,43.91],[4.77,43.91],[4.73,43.92],[4.77,43.93],[4.81,43.96],[4.81,43.98],[4.84,43.98],[4.84,44],[4.81,44.01],[4.8,44.03],[4.76,44.07],[4.72,44.07],[4.7,44.1],[4.72,44.18],[4.7,44.19],[4.7,44.21],[4.67,44.21],[4.67,44.23],[4.64,44.27],[4.65,44.32],[4.76,44.32],[4.76,44.31],[4.8,44.3],[4.8,44.26],[4.82,44.22],[4.88,44.26],[4.94,44.26],[5.06,44.3],[5.07,44.28],[5.1,44.28],[5.16,44.31],[5.17,44.29],[5.15,44.28],[5.16,44.26],[5.16,44.22],[5.23,44.21],[5.25,44.23],[5.3,44.2],[5.35,44.21],[5.38,44.2],[5.38,44.15],[5.41,44.15],[5.45,44.11],[5.49,44.11],[5.49,44.07],[5.5,44.06],[5.54,44.06],[5.54,44.02],[5.51,43.99],[5.5,43.95],[5.54,43.93],[5.56,43.94],[5.58,43.91],[5.6,43.91],[5.59,43.88],[5.54,43.84],[5.56,43.82],[5.62,43.83],[5.67,43.8],[5.71,43.75],[5.74,43.74],[5.75,43.72]] ] ]}}

---

A la limite, il serait préférable que le marker soit au centre du Département plutôt que de l'Enclave si on ne peut pas faire mieux.

Faut-il que je "partage" le Vaucluse en 2 dans le geoJSON ou y a-t-il une solution "propre" ?

Citation:

---

ne calcule le centroid QUE du premier polygone lu, sans tenir compte de l'ensemble du multipolygone.

---

Effectivement c'est clairement indiqué dans les sources

Citation:

---

Envoyé par Leaflet.js

// polygon centroid algorithm; only uses the first ring if there are multiple

---

Citation:

---

Faut-il que je "partage" le Vaucluse en 2 dans le geoJSON ou y a-t-il une solution "propre" ?

---

• J'entrevois aux moins deux solutions, une simple et à mon avis suffisamment précise qui consiste, dans le cas de multi-polygones, à récupérer les limites, via un getBounds(), et à centrer sur celle-ci
Cela donnerait :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function onEachFeature(feature, layer) { let centroid; // how many polygon ? const nbPolygone = feature.geometry.coordinates.length; // on attache le layer à la map layer.addTo(map); // on récupére le centre suivant le cas if(nbPolygone === 1) { centroid = layer.getCenter(); } else{ centroid = layer.getBounds().getCenter(); } // on attache un marker L.marker(centroid).addTo(map); // la suite de ton code layer.on({ mouseover: highlightFeature, mouseout: resetHighlight }); }

---

il risque d'y avoir des cas où le marqueur sera hors zone polygone.

• Une autre consiste à passer par une bibliothèque dédiée comme Turf.js qui devrait répondre à toutes tes attentes.

Re,

Cette 1° solution me convient parfaitement. Je ne fais pas de la géomatique de précision.

https://essaillon-sederon.net/spip.php?article668

Un grand merci pour ton aide précieuse.