OpenLayers 3 の使い方を調べている - [hello world 動かない　][検索]

OpenLayers 3 を使ってみる

とりあえずポイントデータを表示させるところまで使えるようになりたい。

公式の Quick Start のソースを表示する

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.5.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

f:id:shim0111:20150531163504j:plain

OpenStreetMapで日本を表示する

<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([139.5, 35.8], 'EPSG:4326', 'EPSG:3857'),
      zoom: 8
    })
  });
</script>

layersに指定できるのはImage、Tile、Vectorでこの中から選んでくれ的なことが書かれていたのでOSMを指定する。
http://openlayers.org/en/v3.5.0/apidoc/ol.source.html

表示位置の指定はview.centerで指定する。
ol.proj.transformの第1引数に[経度、緯度]で指定すればよい。
OpenStreetMapも球面メルカトル図法を使用しているので第2,3引数はこのままで良い。
詳しく知りたい場合は[空間参照座標系測地系投影法 ][検索]

とりあえず現時点でこうなった
f:id:shim0111:20150531172139j:plain

ポイントを地図に追加する

少し回りくどい書き方をしているが経緯度から地図にポイントを置くまでの流れを一行ずつ

<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([139.5, 35.8], 'EPSG:4326', 'EPSG:3857'),
      zoom: 8
    })
  });

  // ポイントの位置(経緯度)
  var pos = [139.55, 35.85];

  // ポイントの位置(xy)
  var coord = ol.proj.transform(pos, 'EPSG:4326', 'EPSG:3857');

  // ポイントを作成する
  var point = new ol.geom.Point(coord, 'XY');

  // フィーチャを作成する
  var feature = new ol.Feature(point);

  // ソースを作成する
  var vectorSource = new ol.source.Vector();

  // ソースにフィーチャを追加する
  vectorSource.addFeature(feature);

  // レイヤを作成する
  var vectorLayer = new ol.layer.Vector();

  // レイヤにソースを追加する
  vectorLayer.setSource(vectorSource);

  // レイヤをマップに追加する
  map.addLayer(vectorLayer);

</script>

青い丸が表示された
f:id:shim0111:20150531211650j:plain

スタイルの設定や地図のコントロール等に関してはまた今度調べる。