Last active
April 8, 2019 07:05
-
-
Save KMR-zoar/50dc5247cb3629d85affcb2d362eb40d to your computer and use it in GitHub Desktop.
Leaflet で GeoJSON タイルを表示するためのシンプルな実装です。このスクリプトのオリジナルは pkorac 氏によって作成されました。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
# このスクリプトの元ネタはこちらです。 | |
https://gist.github.com/pkorac/5287314 | |
ご自身の責任でご利用ください。 | |
- 普段通り地図画像タイルを設定します | |
- 'tileload' イベントから JSON をロードする関数を呼び出します | |
- タイルレイヤーに GeoJSON データを追加します | |
- ズーム完了時に一度タイルレイヤーをクリアすることで様々なズームレベルの GeoJSON タイルを利用できます | |
- map.on の定義場所によっては 'zoomend' より 'zoomstart' の方が良い場合があります | |
*/ | |
/* | |
CDN かダウンロードした Leaflet を読み込みます | |
axios を読み込みます | |
- ただし Promise が利用できない環境の場合にはオリジナル通り jQuery を使うか Polyfill を読み込みます | |
*/ | |
var map = L.map('map'); | |
// 通常通り地図画像タイルを設定 | |
var imageTile = new L.tileLayer( | |
'http://Map image Tile URL/{z}/{x}/{y}.png', | |
{ | |
attribution: 'attribution', | |
maxZoom: 18 | |
} | |
).addTo(map); | |
// GeoJSON をセットするために空の GeoJSON レイヤーを設定します。 | |
// ここでスタイルを設定することも可能です。 | |
var vectorTile = L.geoJSON().addTo(map); | |
// 'tileload' イベントが発生する度に GeoJSON を読み込み、レイヤーにセットします。 | |
imageTile.on('tileload', function(event) { | |
var tilePath = event.coords; | |
var x = tilePath.x; | |
var y = tilePath.y; | |
var z = tilePath.z; | |
var jsonUri = 'URL to GeoJSON tile' + z + '/' + x + '/' + y + '.geojson'; | |
// ajax リクエストで GeoJSON を読み込み、レイヤーにセットします。 | |
axios.get(jsonUri).then(function(res) { | |
vectorTile.addData(res.data); | |
}); | |
/* Promise が使えない環境では jQuery などを利用します。 | |
$.geoJSON(jsonUri, function(json) { | |
vectorTile.addData(res.data); | |
}) | |
*/ | |
}); | |
// ズームが変更されたら GeoJSON レイヤーをクリアします。 | |
map.on('zoomend', function() { | |
vectorTile.clearLayers(); | |
}); | |
map.setView([35.857182, 139.650787], 16); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment