読者です 読者をやめる 読者になる 読者になる

地理院地図で地図のズームレベルを取得する

マネっこ第二弾。
GoogleMapでクリックされた位置を取得する - なか日記に続いてGoogleMapで地図の倍率を取得する - なか日記を参考に地図のズームレベルを取得してみました。
なお、その間にGoogleMapで住所などから位置を取得して表示する - なか日記という記事もあったのですが、ざっと調べたところOpenLayersで日本の住所をジオコーディングするのはなかなか手間がかかるようなので飛ばしています。

前回は地理院地図でクリックされた位置の緯度経度を取得する - えぢた 2.2 @k_zoar

画面

f:id:k-side:20140807145034p:plain

コードサンプル

<!DOCTYPE html>
<html>
   <head>
      <title>地図の倍率を取得する</title>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <meta charset="utf-8" />
      <style>
         html, body, #map {
            height: 500px;
            width:  500px;
            margin:  20px;
            padding: 20px;
         }

         /* 国土地理院著作権表示 */
         div.olControlAttribution {
            padding: 3px;
            color:#000;
            background-color:#fff;
            background-color:rgba(230,255,255,0.7);
            font-size:12px;
            bottom:5px;
            vertical-align: middle;
         }
      </style>
      <script src="./jquery-2.1.1.min.js"></script>
      <script src="./OpenLayers/OpenLayers.js"></script>
      <script>
         var map;
         var projection3857 = new OpenLayers.Projection("EPSG:3857");
         var projection4326 = new OpenLayers.Projection("EPSG:4326");
         var deflonlat = new OpenLayers.LonLat(139.6489569, 35.8574244).transform(projection4326, projection3857);

         $(function () {
            map = new OpenLayers.Map({
               div: "map",
               projection: projection3857,
               displayProjection: projection4326
            });

            map.addLayer(new OpenLayers.Layer.XYZ("標準地図",
               "http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", {
                  attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html'>国土地理院</a>",
                  maxZoomLevel: 18
               }));

            map.setCenter(deflonlat, 17);

            map.events.on({
               'zoomed': chkZm,
               'move': chkZm
            });

            function chkZm() {
               var zoom = map.getZoom();
               $("#zoomlv").val(zoom);
            }
         });
      </script>
   </head>
   <body>
      <input id="zoomlv" type="text" value="17" />
      <div id="map"></div>
      </script>
   </body>
</html>

地図のズームと移動のタイミングでズームレベルを取得するmap.zoom()で取ってくればよいので緯度経度の取得ほど難しくありませんでした。

さて、ジオコーディングについてはじっくり方法を探っていきたいと思います。
簡単にできるサンプルをお持ちの方の情報をお待ちしております(ぇ