Leafletの地図上に線や円などのベクタデータを表示するサンプルプログラムです。サンプルプログラムでは、日本地図上に、金沢を中心とした半径100kmの円と、金沢と東京を結ぶ直線を重ねて表示しています。
Leafletの地図上に線や円などのベクタデータを表示するサンプルプログラムです。
サンプルプログラムでは、日本地図上に、金沢を中心とした半径100kmの円と、金沢と東京を結ぶ直線を重ねて表示しています。
HTML、CSSのソースは、地図にボタンを表示と同じです。
Leafletの日本地図上に、線や円などのベクタデータを表示するサンプルプログラムです。
サンプルでは、線や円などのベクタデータは、LayerGroupに格納して表示しています。
LayerGroupに格納することで、ベクタデータをまとめて非表示にしたりすることができます。
サンプルでは使っていませんが、L.polylineや、L.circleでは、Leafletのオブジェクトが返却されますので、そのオブジェクトを覚えておけば、個々の要素を削除したり細かな制御を行うことができます。
線や円は、polylineや、circleメソッドでインスタンスを作成しますが、Leafletのクラス名は、キャピタライズされた名前となっていますので、API仕様書のPolylineクラスや、Circleクラスの箇所を参照します。
線や円などのベクタデータの色や透過度は、オプションで指定します。
オプションは、Pathオブジェクトを継承していますので、PathオブジェクトのAPI仕様を参照する必要があります。
ベクターデータには、多角形を描く Polygonや、長方形を描く Rectangleなどもありますので、詳しくは、API仕様書を見て下さい。
function init() { // 初期処理
・・・・・
let lay = L.layerGroup().addTo(map); // ベクターデータ表示領域
L.polyline([[36.55, 136.66],[35.68, 139.77]], {color: '#ee1111'}).addTo(lay);
L.circle([36.55, 136.66], 100000, {color: '#33ee55'}).addTo(lay);
}