Leafletでプロット、線引き

 Leaflet(leafletjs.com/)使いやすい。お奨め。

<div id = "map"></div>

 で表示(位置決め)。
 表示させる内容は、以下のJavaScript。

<script>
var map = L.map('map').setView([34.50 , 150.00] , 3);
L.tileLayer(
'https://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{attribution: 'Map data © <a href="https://openstreetmap.jp">OpenStreetMap</a>'})
.addTo(map);
L.control.scale()
.addTo(map);

L.marker([13.47 , 144.75])
.addTo(map)
.bindPopup("ぐあむ")

L.circle([34.50 , 131.47] ,100000,{
color :'red'
})
.addTo(map)
.bindPopup("あぶ")

var marker2 = L.icon({
iconUrl:'fune.png',
iconSize:[25,25]
});
L.marker([39.72 , 140.10],
{icon:marker2})
.addTo(map)
.bindPopup("あきた")

L.polyline([[13.47 , 144.75],[34.50 , 131.47]],{ "color": "green", "weight": 10, "opacity": 0.5})
.addTo(map);
L.polyline([[21.31 , 202.15],[39.72 , 140.10]],{ "color": "green", "weight": 10, "opacity": 0.5})
.addTo(map);
L.polyline([[13.47 , 144.75],[43.73 , 124.63]],{ "color": "red", "weight": 4, "opacity": 0.5})
.addTo(map);
L.polyline([[21.31 , 202.15],[43.73 , 124.63]],{ "color": "red", "weight": 4, "opacity": 0.5})
.addTo(map);
</script>

オープンストリートマップ OpenStreetMapにプロット、線引き   

 スクリプトの上から順に

 表示位置セット。ズームレベル3。

 タイルレイヤー L.tileLayer()で地図の種類指定。引用元も記載。
 OpenStreetMapの他、国土地理院の地図、GoogleMapなど色々選べる。

GoogleMap(衛星画像)にプロット、線引き   

 GoogleMapはタイルレイヤーの部分が、

L.tileLayer(
'https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
{maxzoom:20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: 'Map data © <a href="https://www.google.com">GoogleMap</a>'})
.addTo(map);

 s,h&x={x}&y={y}&z={z}’のs,h&xが、
 m&xで標準的な地図、
 s&xで衛星画像の地名なし、
 p&xで地形(レリーフ)。

 GoogleMapはLeafletやPythonで呼び出して使うというより、GoogleMapで完結している感じ。色々な情報がのっているので、お店など検索用途で使うのに適している。

 L.control.scale()でスケール追加。

 L.marker()でマーカーをプロット。クリックすると「ぐあむ」と表示。
 L.icon()を使って別のアイコン(ここではfune.png)に変えることもできる。

 L.circle()で赤色の円をプロット。中心の緯度・経度の次の値は半径(m)。100000(=100km)は大きすぎた。

 L.polyline()で線引き。opacityは透明度。
 赤色の延長線は、2直線の方程式から交点の座標を計算して……なんてスマートな方法ではなく、このへんかな、とあたりをつけて緯度、経度の値をいじっただけ。

 緯度1°の距離と経度1°の距離は同じではないし、球面なので2地点の距離も三平方の定理で、というわけにはいかない。

 オンライン地図は、埋め込みすぎると重いページになる。
 Leafletはサクサク動くが、JavaScriptの処理次第では重いページになる。
 重い場合、結果だけ表示できればよいので、Pythonをいじってみたり、模索中。

MAP
スポンサーリンク
ふシゼン
タイトルとURLをコピーしました