OpenLayers 3 でGeolocationを使う

目次

概要

通常、JavaScriptでGPSの情報を使う場合Geolocation APIを使います。

OpenLayersでは、そのGeolocation APIのラッパーが用意されているため、さらに簡単にGPSの情報を使うことができます。

今回、このOpenLayers 3 のGeolocationについてまとめておきます。

環境

  • OpenLayers 3.18
  • Google Chrome

Geolocationの注意

私が調べた限り、1回だけ現在地の情報を知りたいという使い方はできないようです。

なので、使う場合は現在地の情報を逐一知りたいという時に使うのがベストだと思います。

使い方

OpenLayersのGeolocationを使う場合には、ol.Geolocation()を使います。

var geolocation = new ol.Geolocation({
  projection: view.getProjection(),
  tracking: true
});

trackingによって、現在の位置を逐一追いかけるようにします。

geolocation.on('change', function(evt) {
  window.console.log(geolocation.getPosition());
});

後は、changeというイベントが発火した時に、実行する処理を関数として指定します。

現在地の情報はgetPosition()関数から取得します。

今回の例では、changeにしましたが、changeでは向きの変化など色々な変化でイベントが発火します。

なので、change:positionのように、細かな指定をすることで、changeの中でもさらに特定のいべんとにのみ発火するようにすることができます。

ちなみに、change:positionは現在地の変化です。

これが、大まかなol.Geolocation()の使い方です。

実際に、地図上に現在地を表示するためには、featureやlayerなどを用意しないといけませんので、私が用意したものを書きに載せておきます。

currentPlaceStyle = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 6,
    fill: new ol.style.Fill({
      color: '#3399CC'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 2
    })
  })
});

currentPlaceFeature = new ol.Feature();
currentPlaceFeature.setStyle(currentPlaceStyle);

currentPlaceLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [currentPlaceFeature]
  })
});

var geolocation = new ol.Geolocation({
  tracking: true
});

geolocation.on('change:position', function() {
  var coord = geolocation.getPosition();
  coord = ol.proj.transform([coord[0], coord[1]], 'EPSG:4326', 'EPSG:3857');
  currentPlaceFeature.setGeometry(coord ? new ol.geom.Point(coord) : null);
});

マップの表示部分は、ここには書いていませんがOpenStreetMapを使用しています。

実際にこのように表示されます。

normal_8ddc8d6c-bce4-464e-a14d-786ccf044538.png

まとめ

継続して現在地の情報が知りたいのであれば、OpenLayersのGeolocationはとても使いやすいと思いました。