実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8" /> <title>MapLibre and MapBoxDraw</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- MapLibreのライブラリーをロード --> <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script> <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css"> <!-- MapBoxDrawの描画機能をロード --> <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css"> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <script> let map = new maplibregl.Map({ container: 'map', style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json', center: [135.0, 35.0], zoom: 13, minZoom: 4, maxZoom: 17, }); // MapBoxによる描画機能 let draw = new MapboxDraw({ displayControlsDefault: false, controls: { point: true, line_string: true, polygon: true, trash: true, } }); // 右上にカスタムコントロールとして追加 map.addControl(draw, 'top-right'); </script> </body> </html> |
手順
head要素内で以下を読み込むturf.js：空間演算用のライブラリー(Turf.js)mapbox-gl-draw.jsmapbox-gl-draw.css
Mapオブジェクトを生成するMapboxDrawオブジェクトを生成する- 生成した
MapboxDrawオブジェクトをMapオブジェクトのコントロールとして追加する
MapBoxDrawコンストラクターのパラメーター
パラメーターなしの場合
パラメーターなしの場合、Line、Polygon、Point、trashとCombine、Uncombineのボタンが準備される。
パラメーターありの場合
表示されるボタンを選ぶことができる。
displayControlsDefaultをfalseにセットcontrolsの連想配列で必要なボタンをtrueにセットline_string,polygon,point,trash,combine_features,uncombine_features