ホーム > カテゴリ > HTML5・JavaScript >

[OpenLayers]緯度、経度、ズームレベルを取得する

OpenLayersで緯度、経度、ズームレベルを取得するサンプルです。地図の移動やズームを変更すると自動的に緯度、経度、ズームレベルを表示します。

OpenLayers.jsのダウンロード

OpenLayer 2.13.1
http://openlayers.org/two/ <ダウンロード>

Zipファイルを展開後(解凍後)に使用するファイルはOpenLayers.jsとimgフォルダ、themeフォルダです。この3点があればサンプルは動作します。

サンプル

緯度、経度やズームレベルを取得するサンプルです。地図を移動したりズームレベルを変更してみて下さい。


ここにデータが表示されます。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="OpenLayers.js"></script>
<script type="text/javascript">

  // 座標系の設定
  var projection3857 = new OpenLayers.Projection("EPSG:3857");
  var projection4326 = new OpenLayers.Projection("EPSG:4326");
  
  var map = null;
  var cross_control = null;   
  
  // -------------------------------------------------------------------------
  //  マップの生成
  //
  //  fx             経度(例:富士山 138.731388) ※1 
  //  fy             緯度(例:富士山 35.3622222) 
  //  izoom          表示倍率(用途にもよりますが10ぐらいが目安)
  //  imaxZoomLevel  最大倍率(用途にもよりますが17ぐらいが目安)
  //
  //  ※1 googleマップや地理院地図の検索では「緯度,経度」の順番です。 
  function init_map(fx,fy,izoom,imaxZoomLevel){
    
    // マップの生成
    map = new OpenLayers.Map({
      div: "map",
      projection: projection3857,
      displayProjection: projection4326,
    });

    // レイヤーの生成
    map.addLayer(new OpenLayers.Layer.XYZ(
         "標準地図",  // レイヤー名
         "https://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", // url
          { 
            // options(attribution:帰属,,minZoomLevel:最小倍率(未使用),maxZoomLevel:最大倍率)
            attribution  : "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>", 
            maxZoomLevel : imaxZoomLevel 
          }
          ));        
    
    // マップの中心を設定
    map.setCenter(new OpenLayers.LonLat(
                        fx, // X:経度
                        fy  // Y:緯度
                      ).transform(projection4326, projection3857),// 座標系 
                      izoom // デフォルトズームレベル
                      );
         
                      
    // 緯度、経度変更イベントの登録  
    map.events.register("moveend" , map, onMapChange);  
    
    // 十字架コントロールの生成
    create_cross_control();    
          
  }
  
  function onMapChange() {
    
      var lonLat = this.getCenter().transform(projection3857,projection4326);
      
      // 切捨て
      lonLat.lat = Math.round(lonLat.lat*1000000)/1000000;
      lonLat.lon = Math.round(lonLat.lon*1000000)/1000000;
      
      document.getElementById("msg").innerHTML  = '<br />' +
                                                  '緯度:' + lonLat.lat  + '<br />' + // 緯度 
                                                  '経度:' + lonLat.lon  + '<br />' + // 経度
                                                  'ズーム:' +map.getZoom();
  }
    
  // 十字架の生成
  function create_cross_control(){    
     
     cross_control = new OpenLayers.Control();          
     cross_control.draw=  function(){
           
        // アイコンのサイズ
        var iconsize = new OpenLayers.Size(32, 32);
        
        // マップの中央座標の算出                       
        var point = new OpenLayers.Pixel(map.getCurrentSize().w / 2 - (iconsize.w / 2),
                                         map.getCurrentSize().h / 2 - (iconsize.h / 2));
        
        // ユニークIDの生成
        var uniqid = OpenLayers.Util.createUniqueID("petitmonte.com");
        
        // イメージの生成
        cross_control.div = OpenLayers.Util.createAlphaImageDiv(
          uniqid,       // ユニークID
          point ,       // マップの中央座標
          iconsize,     // アイコンのサイズ
          "test.gif",   // アイコンファイル名
          "absolute"    // 絶対位置
        );
        return cross_control.div;
     };
    
     map.addControl(cross_control);
  }
  
  // 十字架の削除
  function remove_cross_control(){ 
    
    if (cross_control){
      map.removeControl(cross_control);
    }    
    cross_control = null;
    
  }
  
  // onresizeイベント    
  window.onresize = function(){
    
    // 十字架の再生成 
    remove_cross_control();
    create_cross_control();
    
  }
    
  // onloadイベント
  window.onload = function() {
    
    // マップの生成(経度、緯度、倍率、最大倍率)
    init_map(138.731388,35.362222,10,18);
    
  }
     
</script>
<style type="text/css">

  /* 国土地理院の出典表示用 */
  body {padding: 0; margin: 0}
  div.olControlAttribution {
    padding: 3px;
    color:#000000;
    background-color:#ffffff;
    background-color:rgba(230,255,255,0.7);
    font-size:12px;
    line-height:14px;
    bottom:5px;
    vertical-align: middle;
  }
</style>
</head>
<body>

<!-- マップの表示エリア -->
<div id="map" style="height: 350px; width: 100%;"></div>

<!-- メッセージ -->
<div id="msg"><br />ここにデータが表示されます。</div>

</body>
</html>

十字線のアイコンは下記をダウンロードして下さい。サイズは48x48ですがプログラム側で32x32などに変更可能です。
 (48x48)
※直リンクは禁止です。必ずダウンロードして使用してください。
※このアイコンは非商用・商用問わずにご利用可能です。

サンプルの解説

マップに「map.events.register("moveend" , map, onMapChange);」でmoveendイベントを登録します。 moveendイベントは地図の位置などが変更された時に発生するイベントです。緯度、経度は「getCenter()」でズームレベルは「getZoom()」で取得します。

動作環境

このサンプルは「OpenLayers2.13.1」で動作確認をしております。その他のバージョンですと動作しない場合もございますのでご了承ください。

OpenLayers関連記事

国土地理院の地図をブログやWEBサイトで使用する
地図に便利なコントロールを追加する1
地図に便利なコントロールを追加する2
複数のレイヤーを重ねてレイヤーを切り替え
中央に十字線(センターマーカー)を表示する
左右に切れ目のない地図を表示する
緯度、経度、ズームレベルを取得する
地図にマーカーを設定する
マーカーにクリックイベントを設定する
マーカーの説明をポップアップする
KMLファイルを読み込む

公式リンク

地理院タイルを用いた開発(国土地理院)
OpenLayers2.13.1の解説(英語 -公式)
OpenLayers2.13.1のexamples(英語 -公式)






公開日:2015年03月29日 最終更新日:2018年05月02日
記事NO:00604