世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

Overzooming対応

ebrelsford/leaflet-tilelayer-vector · GitHub を用いて、Overzooming 対応した。

Overzooming対応

大きなズームレベルのベクトルタイルを作成することは無駄が多いことが実感できたため、大きなズームレベルを描画する際に小さなズームレベルのタイルを拡大してレンダリングする技術であるOverzoomingの技術を使いたくなった。冒頭に記載した ebrelsford/leaflet-tilelayer-vector · GitHub で対応しているようなので、これを採用してみた。

実際のサイト

http://handygeospatial.github.io/mapsites/2013/12/31/ に配置した。スクリーンショットは次の通り。
f:id:hfu:20131231002037p:plain

ソースコード

<!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>