Comment utiliser centroid

**augier26** · 17/10/2021, 14h16

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

**mathieu** · 17/10/2021, 16h59

montrez nous un exemple de code.

**augier26** · 17/10/2021, 17h37

Dans un geoJSON des départements je trouve

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

getCenter()

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getBounds()

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

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

**mathieu** · 18/10/2021, 07h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**augier26** · 18/10/2021, 07h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var lat = f(X_CENTROID)
var ln = f(Y_CENTROID)

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

Merci de votre aide

**NoSmoking** · 18/10/2021, 08h20

Bonjour,

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.

**augier26** · 18/10/2021, 08h36

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**NoSmoking** · 18/10/2021, 10h41

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**augier26** · 18/10/2021, 11h04

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.

**augier26** · 18/10/2021, 12h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" ?

**NoSmoking** · 18/10/2021, 15h08

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

Envoyé par Leaflet.js

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**augier26** · 18/10/2021, 15h14

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.

Comment utiliser centroid [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager