Leafletの平面図上に線や円などのベクタデータを表示するサンプルプログラムです。サンプルプログラムでは、CADの平面図の上に、ベクタデータを重ねて表示していますが、地図上に緯度経度を使って表示することも可能です。
Leafletの平面図上に線や円などのベクタデータを表示するサンプルプログラムです。
サンプルプログラムでは、CADの平面図の上に、ベクタデータを重ねて表示していますが、地図上に緯度経度を使って表示することも可能です。
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([[3.0, 2.0], [5.0, 3.0]], {color: '#00ff00'}).addTo(lay);
L.circle([5.0, 3.0], 1.0, {color: '#ff00ff'}).addTo(lay);
}
サンプルプログラムでは、座標値を配列で指定していますが、lat,lngで指定することもできます。
LeafletのAPIは、配列形式とハッシュ形式の両方に対応しているようです。
function init() { // 初期処理
・・・・・
let lay = L.layerGroup().addTo(map); // ベクターデータ表示領域
L.polyline([{lat: 3, lng: 2}, {lat: 5, lng: 3}], {color: '#00ff00'}).addTo(lay);
L.circle({lat: 5, lng: 3}, 1.0, {color: '#ff00ff'}).addTo(lay);
}