画像




ポイントからサンプルポイントを取得するメモ。




画像




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,
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
}
},
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 points = turf.randomPoint(30,
{
bbox: [139.7533, 35.6713, 139.7808, 35.6901]
}
);

// ポイント表示
map.addSource("CenterPoint", {
type: "geojson",
data: points
});
map.addLayer({
id: "CenterPoint",
type: "circle",
source: "CenterPoint",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#8DCF3F",
"circle-stroke-width": 10,
"circle-stroke-opacity": 0.8,
"circle-color": "#8DCF3F",
"circle-radius": 10,
"circle-opacity": 0.5
}
});

// サンプルポイントを取得
var sample = turf.sample(points, 5);

// ポイント表示
map.addSource("CenterPoint2", {
type: "geojson",
data: sample
});
map.addLayer({
id: "CenterPoint2",
type: "circle",
source: "CenterPoint2",
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
}
});

});

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






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





book


Q&A