画像




ポリゴンの重心を計算するメモ。(2種類)




画像




script.js

// MIERUNE MONO読み込み
var map = new mapboxgl.Map({
container: "map",
style: {
version: 8,
sources: {
m_mono: {
type: "raster",
tiles: ["https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png"],
tileSize: 256
}
},
layers: [{
id: "m_mono",
type: "raster",
source: "m_mono",
minzoom: 0,
maxzoom: 18
}]
},
center: [139.770, 35.676],
zoom: 13
});


map.on("load", function () {
// ポリゴンを取得
var polygon = turf.polygon([[
[139.7661, 35.6759],
[139.7718, 35.6741],
[139.7722, 35.6745],
[139.7786, 35.6837],
[139.7734, 35.6843],
[139.7709, 35.6846],
[139.7687, 35.6799],
[139.7661, 35.6759]
]]);

// ポリゴン表示
map.addSource("PolygonSample", {
type: "geojson",
data: polygon
});
map.addLayer({
id: "PolygonSample",
type: "fill",
source: "PolygonSample",
layout: {},
paint: {
"fill-color": "#58BE89",
"fill-opacity": 0.5
}
});
map.addLayer({
id: "PolygonLineSample",
type: "line",
source: "PolygonSample",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#58BE89",
"line-width": 5,
"line-opacity": 0.8
}
});

// ポリゴンの重心計算1
var point = turf.centerOfMass(polygon);

console.log(point);

// ポイント表示
map.addSource("FeaturesPoint", {
type: "geojson",
data: point
});
map.addLayer({
id: "FeaturesPoint",
type: "circle",
source: "FeaturesPoint",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 5,
"circle-opacity": 0.5
}
});

// ポリゴンの重心計算2
var centroid = turf.centroid(polygon);

console.log(centroid);

// ポイント表示
map.addSource("FeaturesPoint2", {
type: "geojson",
data: centroid
});
map.addLayer({
id: "FeaturesPoint2",
type: "circle",
source: "FeaturesPoint2",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 3,
"circle-opacity": 0.5
}
});

});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl());






Turf.jsを手軽に始めるビルド環境公開しています。
turfjs-starter







Q&A