Overzooming対応
ebrelsford/leaflet-tilelayer-vector · GitHub を用いて、Overzooming 対応した。
Overzooming対応
大きなズームレベルのベクトルタイルを作成することは無駄が多いことが実感できたため、大きなズームレベルを描画する際に小さなズームレベルのタイルを拡大してレンダリングする技術であるOverzoomingの技術を使いたくなった。冒頭に記載した ebrelsford/leaflet-tilelayer-vector · GitHub で対応しているようなので、これを採用してみた。
実際のサイト
http://handygeospatial.github.io/mapsites/2013/12/31/ に配置した。スクリーンショットは次の通り。
ソースコード
<!doctype html> <html> <head> <!-- thx https://github.com/ebrelsford/leaflet-tilelayer-vector --> <meta charset='UTF-8'> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="apple-touch-icon" href="https://si0.twimg.com/profile_images/666603054/r.png"/> <title>vectiles from tilestache</title> <link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet-0.7/leaflet.css'> <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css"> <script src='http://cdn.leafletjs.com/leaflet-0.7/leaflet.js'></script> <script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script> <script src="communist.min.js"></script> <script src="TileCache.js"></script> <script src="TileQueue.js"></script> <script src="AbstractWorker.js"></script> <script src="CommunistWorker.js"></script> <script src="TileLayer.GeoJSON.js"></script> <!-- <script src="TileLayer.Vector.Unclipped.js"></script> <script src="TileLayer.Vector.Debug.js"></script> <script src="TileLayer.Div.js"></script> <script src="TileLayer.Progress.js"></script> --> <script src="TileLayer.Overzoom.js"></script> <script src="Leaflet.label-patch.js"></script> <script src="leaflet-hash.js"></script> <style> html, body, #mapdiv {margin: 0; padding: 0; width: 100%; height: 100%;} </style> </head> <body> <div id='mapdiv'/> <script> icon = L.icon({iconUrl: 'http://handygeospatial.github.io/mapsites/2013/12/13/maki/bus-24.png'}); map = new L.Map('mapdiv', {zoom: 13, center: [35.0249, 135.7658]}); hash = new L.Hash(map); map.addLayer(new L.TileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution: '地理院タイル', minZoom: 13})); map.addLayer(new L.TileLayer.Vector( 'http://www.handygeospatial.info/2013/12/27/{z}/{x}/{y}.geojson', {attribution: '国土数値情報(バス停留所データ) 国土交通省', unloadInvisibleTiles: true, minZoom: 13, serverZooms: [13, 14]}, {style: { // not used "clickable": true, "color": "#F0D", "fillColor": "#0FD", "weight": 1.0, "opacity": 0.3, "fillOpacity": 0.2 }, onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties.P11_001); layer.setIcon(icon); } })); </script> </body> </html>