leaflet

地図上距離測定できるページ作成について

地図上距離測定ページ

目的

GIS勉強の一環として、簡易な距離測定WEBページを作成して見たいと思います。

ツール選択

web系GISライブラリとして、Google Map, Mapbox, OpenLayersが有名ですが、ライセンスがうるさいため、ここは軽量且つパワフルなleafletを使います。

ベース地図

地理院タイル及びGoogleの地図タイルを利用します。
無料で利用できる地図タイルはありがたいですね。地理院の方はいい仕事してくれました。
初めて税金が正しいところに使われたと実感します。
地理院の地図タイルはたくさんあります。ここで使うものをリストします。

  • 地理院標準地図
    https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png

  • 地理院淡色地図
    https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png

  • 地理院航空写真
    https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg

  • Google地図のみ
    https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}

  • Google写真+地図
    https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}

  • Google写真のみ
    https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}

CSS

全部手書きでもよいがbootstrapを利用します。

JS

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
var map = L.map('map', {
	zoomAnimation: false,
	zoomControl: false,
	inertia: false,
	maxZoom: 18, 
	minZoom: 6,
	maxBounds: [[80, 0], [-80, 360]],
	maxBoundsViscosity: 1,
	worldCopyJump: false,
	preferCanvas: false,
	zoomSnap: 1,
	zoomDelta: 1,
	wheelPxPerZoomLevel: 240,
	padding: 0,
	doubleClickZoom: false,
	renderer: L.canvas()
}).setView(new L.LatLng(35.681236, 139.767125), 12);


L.control.polylineMeasure({
	showMeasurementsClearControl: false,
	showUnitControl: true,
	showBearings: false
}).addTo(map);

new MousePositionControl().addTo(map);

var tile = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {
	attribution: "<a href='https://developers.google.com/maps/documentation' target='_blank'>Google Map</a> | <a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
map.addLayer(tile);



$('.ctl-tile-url').on('click', function(e){
	e.preventDefault();
	var tile_url = $(e.target).data('url');
	tile.setUrl(tile_url);
});

成果物

地図上距離測定

地図上距離測定して見たい方はぜひ使ってみてください。

ソースコードもコンパイルしてないので、興味のある方はぜひ見てください。

感想

leafletは他のライブラリを依存しないし、ソースコードも少ないため、読んでみるとjavascriptの勉強にもなります。
大変素晴らしいライブラリです。今後もっと深堀して行きたいと思います。