[Turf.js]指定した範囲に等間隔にポイント(ポイントグリッド)を生成する

ポイントグリッドを生成する

bboxで指定した範囲に、任意の間隔でポイントグリッドを生成します。

var bbox = [-70.823364, -33.553984, -70.473175, -33.302986];
var pointGrid = turf.pointGrid(bbox, 3,  {units: 'kilometers'});
//-> point grid geojson

var bbox = [-70.823364, -33.553984, -70.473175, -33.302986];

var pointGrid = turf.pointGrid(bbox, 3, {units: 'kilometers'});

//-> point grid geojson

leafletを使ったサンプル

Turfを使ってポイントグリッドを生成する

example

描画ツール（四角）で描画された範囲をポイントグリッドで埋めます。
あまり広い範囲を選択すると、処理の負荷が高すぎてブラウザが固まるor落ちます。

var mymap = L.map('mapid').setView([36.3426631, 138.6092733], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'Mapboxのアクセストークンを記載'
}).addTo(mymap);


var controler = mymap.pm.addControls({
  position: 'topleft',
  drawMarker:false,
  drawPolyline:false,
  drawRectangle:true,
  drawPolygon:false,
  drawCircle: false,
  editMode:false,
  dragMode:false,
  cutPolygon:false,
  removalMode:false,
});


//図形が生成された時に発火するイベント
mymap.on('pm:create', function(e){
    //生成したrectangの座標を取得する
    var bbox = e.layer.getBounds().toBBoxString().split(",")
        .map(function(d){ return +d });

    //ポイントグリッドを作成する
    var pointGrid = turf.pointGrid(bbox, 0.5, {units: 'kilometers'});

    L.geoJSON(pointGrid).addTo(mymap);



});

var mymap = L.map('mapid').setView([36.3426631, 138.6092733], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

maxZoom: 18,

id: 'mapbox.streets',

accessToken: 'Mapboxのアクセストークンを記載'

}).addTo(mymap);

var controler = mymap.pm.addControls({

position: 'topleft',

drawMarker:false,

drawPolyline:false,

drawRectangle:true,

drawPolygon:false,

drawCircle: false,

editMode:false,

dragMode:false,

cutPolygon:false,

removalMode:false,

});

//図形が生成された時に発火するイベント

mymap.on('pm:create', function(e){

//生成したrectangの座標を取得する

var bbox = e.layer.getBounds().toBBoxString().split(",")

.map(function(d){ return +d });

//ポイントグリッドを作成する

var pointGrid = turf.pointGrid(bbox, 0.5, {units: 'kilometers'});

L.geoJSON(pointGrid).addTo(mymap);

});

ポイントグリッドを生成する

leafletを使ったサンプル

投稿者: shimizu