tanaka's Programming Memo

プログラミングについてのメモ。

OpenLayersで地図表示

OpenLayers

OpenLayersを利用して、フリーの地図Open Street Mapを表示する方法をまとめる。

環境準備

OpenLayresのダウンロード

地図を表示するJavaScriptのフリープラグインOpenLayersをダウンロードする。

  1. http://trac.osgeo.org/openlayers/wiki/HowToDownloadに接続
  2. 「Current Stable API URL is always」に続くhttp://openlayers.org/api/OpenLayers.jsを右クリックして、「名前を付けてリンク先を保存」を選択。
  3. 適当なフォルダに保存する。この例では、htmlファイルを置くフォルダ内に「plugins」というフォルダを作成して、その中に保存。

jQueryのダウンロード

簡単にDOMを扱うためにjQueryを組み込んでおく。

  1. http://jquery.com/download/に接続
  2. 「Download the compressed, production jQuery x.xx.x」を右クリックして、「名前を付けてリンク先を保存」を選択
  3. 適当なフォルダに保存する。この例では、htmlファイルを置くフォルダ内に「plugins」というフォルダを作成して、その中に保存。ファイル名をjquery.min.jsに変更する。

Webページの準備

地図を表示するためのWebページを準備する。設定は以下の通り。

  • HTML5を利用(<!DOCTYPE html>ではじめる)
  • 地図を画面全体に表示するために、idがmap_canvasのスタイルの幅、高さを100%にする
  • jQuery、OpenLayersを読み込む
  • マップを表示するためのidがmap_canvasのdiv要素を作成しておく。
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
	<script type="text/javascript" src="plugins/jquery.min.js"></script>
	<script type="text/javascript" src="plugins/OpenLayers.js"></script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

シンプルなOSM(Open Street Map)を表示

Basic OSM Example(http://openlayers.org/dev/examples/osm.html)を参考に、OSMを表示する。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="../plugins/jquery.min.js"></script>
    <script type="text/javascript" src="../plugins/OpenLayers.js"></script>
    <script type="text/javascript">
        var map , layer;
        $(function() {
            map = new OpenLayers.Map("map_canvas");
            layer = new OpenLayers.Layer.OSM("Simple OSM Map");
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(139.40,35.65).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            ),16);
        });
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
  1. 地図の作成は、jQueryとOpenLayersのプラグインの読み込みが完了してから実行したいので、「$(function() {//地図描画プログラム});」に実装する。
  2. OpenLayersを制御するためのインスタンスを生成する。「map = new OpenLayers.Map(表示先のid);」の部分。地図にレイヤーや中心点を設定するために、生成したインスタンスはmapに代入してとっておく。
  3. OpenLayersでは、色々な種類の地図や、ベクトル図形を、レイヤーで重ねて表示する。「layer = new OpenLayers.Layer.OSM(レイヤー名);」で、OSMのレイヤーを作成して、インスタンスを変数layerに代入。
  4. 「map.addLayer(layer);」で、レイヤーを地図に設定する。
  5. 「map.setCenter(経度緯度 , ズーム);」で、地図の中心と倍率を指定する。
    1. 経度と緯度は「new OpenLayers.LonLat(経度,緯度)」で生成する。
    2. Googleと順番が逆なので注意。
    3. 多摩動物公園周辺は、経度が「139.40」、緯度が「35.65」。
    4. GISには様々な座標系がある。今回は緯度経度で位置を表すので、緯度経度から現在の座標系に変換するために「.transform(変換元,変換先)」を呼び出している。”EPSG:4326”というのが「緯度経度」を表し、「map.getProjectionObject()」で、地図の内部で利用している座標系を呼び出している。
    5. 倍率は0が最小。大きくするごとに拡大率が高くなる。

参考URL