leaflet

国土地理院標高APIを利用したleafletマウスポイント標高プラグインの実装

標高表示プラグイン

背景

国土地理院標高APIが公開され、任意地点の
高精度な標高値が簡単に取得できるようになっています。
一方leafletでまだそれを利用した標高表示プラグインが見当たらい為作ってみました。

まず、デモサイトはこちらです。

実装

leaflet は軽量でありながら、大変強力なライブラリです。実際地理院地図2Dはleafletがベースになっています。
今回jQueryとunderscore.jsを依存します。

データ取得時の$.ajaxと、eventを抑えるための.debounce、と描画じに.templateを使っています。

コード抜粋を貼ります。

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var ElevitionJP = L.Control.extend({
	options: {
		position: 'bottomright'
	},
	demApiURL: '//cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php',
	onAdd: function(map){
		this._container = L.DomUtil.create('div', 'l_elevitionjp');
		L.DomEvent.disableClickPropagation(this._container);
		map.on('mousemove', this._onMouseMove, this);

		var me = this;
		me._lazyDem = _.debounce(function(){
			var requestData = {
				lat: me.currentLatLng.lat,
				lon: me.currentLatLng.lng,
				outtype: 'JSON'
			};
			$.ajax({
				url: me.demApiURL,
				dataType: 'json',
				data: requestData,
				beforeSend: function(jqXHR, settings){
					jqXHR.requestData = requestData;
				}
			}).done(function(data, textStatus, jqXHR) {
				if(jqXHR.requestData.lat == me.currentLatLng.lat && jqXHR.requestData.lon == me.currentLatLng.lng) {
					me.currentDem = data;
					me.resetHtml();
				}
			});
		}, 300);

		me.currentLatLng = {lon: null, lng: null};

		return me._container;
	},

	onRemove: function(map){
		var me = this;
		map.off('mousemove', me._onMouseMove, me);
	},

	_onMouseMove: function(e){
		var me = this;
		me.currentLatLng = e.latlng.clone();
		me.currentDem = {elevation: '-----', hsrc: '-----'};
		me._lazyDem();
		me.resetHtml();
	},

	resetHtml: function(){
		var me = this;
		var zoom = me.currentZoom;
		var lat = me.currentLatLng.lat;
		var lng = me.currentLatLng.lng;
		var html = _.template([
			'<table>', 
			'	<tr><td colspan="2" style="text-align: left;"><%=elevation=="-----" ? "標高: -----" : "標高: " + Math.round(elevation*3.28084) + " ft　" + elevation + " m" %></td></tr>', 
			'	<tr><td><%=lat10%></td><td><%=lng10%></td></tr>', 
			'	<tr><td><%=lat60%></td><td><%=lng60%></td></tr>', 
			'</table>'
		].join('\n'))(_.extend({
			lat10: lat ? me.convertLat2NS(lat, 5) : '',
			lng10: lng ? me.convertLng2EW(lng, 5) : '',
			lat60: lat ? me.convertLat2DMS(lat)   : '',
			lng60: lng ? me.convertLng2DMS(lng)   : '',
			zoom: zoom,
			elevation: '-----',
			hsrc: '-----'
		}, me.currentDem));
		me._container.innerHTML = html;
	},
	//...
});

  • onAdd onRemove
    L.Control にて初期化や削除時の必須実装。

  • _lazyDem
    ajax を抑えながらデータを取得する実装。

  • resetHtml
    htmlレンダリングの部分です。

CSS

見栄えは .l_elevitionjp で制御できます。
デモサイトでは下記通りです。

1
2
3
4
5
.l_elevitionjp {
	border-radius: 5px;
	background-color: rgba(256,256,256,0.9);
	padding: 5px;
}

ソースコード

コースコードはgithub https://github.com/sengine-xyz/leaflet.elevationJP
にUPしました。

ElevitionJP.jsの内容そのまま使ってもよいが、必要な内容を切り取って使って頂いてもよいです。
参考になって頂ければ幸いです。