実装例
MapLibreの組込みコントロール追加方法。地理院地図ベクトルタイルでの表示例。
|
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 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8" /> <title>MapLibre - Controls</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <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"> </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: 17, minZoom: 4, maxZoom: 17, }); // コントロールの追加 map.addControl(new maplibregl.NavigationControl(), 'bottom-right'); map.addControl(new maplibregl.ScaleControl(), 'bottom-left'); //map.addControl(new maplibregl.GeolocateControl( // {positionOptions: {enableHighAccuracy: true}, trackUserLocation: true}), 'top-right'); // 表示オプション map.showTileBoundaries = true; // map.showCollisionBoxes = true; </script> </body> </html> |
記述方法
mapがMapインスタンスを参照しているとき、以下の形式で記述。
|
1 |
map.addControl(new maplibregl.[コンストラクター], '[位置指定]'); |
[コンストラクター]はコントロールのコンストラクターで、[位置指定]はtop-left、bottom-rightなど
コントロールの種類
- NavigationControl
- ズーム(+/−)とローテーションのボタン。ローテーションはボタン位置でドラッグすると地図が回転し、ダブルクリックで北が上の位置に戻る。
- ScaleControl
- スケールを表示する。スケール表示はズームレベルに合わせて変化する。
- GeolocateControl
- 携帯端末などでユーザーの位置を扱う。
表示オプション
- showTileBoundaries
trueにセットするとタイル境界を表示させる- showCollisionBoxes
trueにセットすると衝突によりラベルが表示されない場合も境界ボックスを描画する。