OpenLayersで緯度経度の線を地図に描画する

14637 ワード
Openlayers JavaScript map GPS JavaScript テキストリンク

GPSロガーで記録した緯度経度をOpenLayersを使って表示するサンプルです。ここでは OpenLayers が持つ KML や GPX の読み込み機能は使わないで、配列で渡した緯度経度の値を使う方法を紹介しています

対象環境

  • OpenLayers v5.3.0

サンプル

こんな感じでコードを書けばいいと思います

ol_sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OL Sample - LineString</title>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      const Map = ol.Map;
      const View = ol.View;
      const Feature = ol.Feature;
      const Polyline = ol.format.Polyline;
      const Point = ol.geom.Point;
      const TileLayer = ol.layer.Tile;
      const VectorLayer = ol.layer.Vector;
      const OSM = ol.source.OSM;
      const VectorSource = ol.source.Vector;
      const Icon = ol.style.Icon;
      const Stroke = ol.style.Stroke;
      const Style = ol.style.Style;
      const Geom = ol.geom;

      const coordinates = [   // 経度、緯度の順で定義
                              [135.495650, 34.702113],
                              [139.767130, 35.680776]
                          ];

      var route = new Geom.LineString(coordinates);
      route.transform('EPSG:4326', 'EPSG:3857');  // 地理座標系(WGS84) の EPSG:4326 からメルカトル図法の EPSG:3857 に変換します

      const routeCoords = route.getCoordinates();
      const routeLength = routeCoords.length;

      const routeFeature = new Feature({
        type: 'route',
        geometry: route
      });
      const startMarker = new Feature({
        type: 'icon',
        geometry: new Point(routeCoords[0])
      });
      const endMarker = new Feature({
        type: 'icon',
        geometry: new Point(routeCoords[routeLength - 1])
      });

      const styles = {
        'route': new Style({
          stroke: new Stroke({
            width: 6, color: [237, 30, 164, 0.8]
          })
        }),
        'icon': new Style({
          image: new Icon({
            anchor: [0.5, 1],
            src: 'http://github.com/suzutsuki0220/TrackView/blob/master/src/image/caution.png?raw=true'  // 適当に置き換えてください
          })
        })
      };

      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [routeFeature, startMarker, endMarker]
        }),
        style: function(feature) {
          return styles[feature.get('type')];
        }
      });

      var map = new Map({
        target: document.getElementById('map'),
        view: new View({
          center: routeCoords[0],
          zoom: 7
        }),
        layers: [
          new TileLayer({
            source: new OSM()
          }),
          vectorLayer
        ]
      });
    </script>
  </body>
</html>

東京と大阪を結ぶ線が表示されます

クラスについて

View、SouceやFeatureなど多くの名前が出てくるので、まずそれらの役割をまとめました。OpenLayersに初めて触れた時に苦労する所だと思いました。

公式ドキュメントには https://openlayers.org/en/latest/doc/tutorials/concepts.html に書かれてます

名前 役割 補足
Map 基底となるクラス MapクラスにViewやLayerなどをセットします
View 地図の表示に関する設定を保持します サンプルでは中央位置とズームレベルを設定してます
Source Layerを構成するためのデータを定義します 地図のプロバイダーを変えたり、GeoJSONやKMLなどデータ形式を指定したりします
Layer 画面の表示を構成するレイヤです Tile Image Vector VectorTile サンプルでは次のレイヤを使ってます。Tile: OSM地図の表示、 Vector: coordinates(経度・緯度) の線の表示
Feature Layerを構成するための要素

Polyline , Point , Icon , Stroke , Style は大体分かると思うので省略します
Geom は Geometry です

ぼやき

今まで Google MapのAPIを使っていたのですが、地図の劣化や料金値上げの話題が上がっているので、別の地図に切り替えようと思って OpenLayers を触ってみました。

OpenLayers で出来ることは 公式のExamples にまとまっているのですが、経路を描画するドンピシャな例は見つからず、最も近そうな Marker Animation では例が複雑すぎでした。Example の polyline を変えれば良いと思ったものの、経度緯度の配列に変えただけでは経路は表示されなくて苦労してました。雑なメモだと思いますが、お役に立てば幸いです