2016年6月25日土曜日

OpenLayers 3 を使ってみよう(その15:OpenLayers v3 で Google Map を表示)

 これは,OpenLayers 3 を使ってみよう(その14:GPX による経路の表示・各点の通過時刻を知る)からの続きになる。 OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に目次がある。
 その13までのページでは OpenLayers v3.7.0 で書いてきたが,ここでは OpenLayers 3.16.0 で書かれている。
 前回(その14:GPX による経路の表示・各点の通過時刻を知る)は,GPX 形式の経路データファイルを OpenLayers を使って表示させる例について書いた。 今回は Google Map を OpenLayers v3 で表示する方法について書こう。 これは,OpenLayers 関連のメーリングリストに載っていたものだが,どこに載っていたのか忘れてしまった…。

 まずは JavaScript を含んだ web ページのソースを載せよう。 説明は このソースの下に書こう。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
   div.fill {width: 100%; height: 100%;}
   body {padding: 0; margin: 0;}
   html, body, #map {height: 100%; width: 100%;}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&key=AIzaSyC9kDhQ95raZdgIv8sXTkHRN6LDl5zM7rw"></script>
<title>Google Maps integration example</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
<script type="text/javascript">
// -------------------------------------------------------------------
var map = null;        // map 変数
var view = null;       // view 変数
var olMapDiv = null;   // OpenLayers Map 用のweb page 上の領域

var kml_vector = null; // KML ファイル用変数
var wp_vector = null;  // waypoint KML ファイル用変数 2

var center_lon = 135.804055; // 表示中心の経度(デフォルトは始点の経度)
var center_lat = 35.0515416666667; // 表示中心の緯度(デフォルトは始点の緯度)

var kml_url  = "workn2/o3cjmap_data.kml";
var kml_url2 = "workn2/o3cjmap_wpdata.kml";

var initZoom = 15; // ズームの初期値
var MinZoom  = 6;   // ズームの最小値(最も広い範囲)
var MaxZoom  = 21;  // ズームの最大値(最も狭い範囲)
// *******************************************************************
function init_map() {
    var gmap = new google.maps.Map(document.getElementById('gmap'), {
      disableDefaultUI: true,
      keyboardShortcuts: false,
      draggable: false,
      disableDoubleClickZoom: false,
      scrollwheel: false,
      streetViewControl: false,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.TOP_RIGHT,
        mapTypeIds: [
          google.maps.MapTypeId.ROADMAP,
          google.maps.MapTypeId.TERRAIN,
          google.maps.MapTypeId.SATELLITE,
          google.maps.MapTypeId.HYBRID
        ]
      },
      zoomControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
      },
      scaleControl: false
    });

// make sure the view doesn't go beyond the 22 zoom levels of Google Maps
    view = new ol.View({
      maxZoom: MaxZoom
    });
    view.on('change:center', function() {
      var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
      gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
    });
    view.on('change:resolution', function() {
      gmap.setZoom(view.getZoom());
    });

    kml_vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'work/o3cjmap_data_20160611.kml',
        format: new ol.format.KML({ showPointNames: false })
      }),
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#319FD3', width: 1 })
      })
    });

    wp_vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'work/o3cjmap_wpdata_20160611.kml',
        format: new ol.format.KML({ showPointNames: false })
      }),
    });

    olMapDiv = document.getElementById('olmap');
    map = new ol.Map({
      layers: [kml_vector, wp_vector],
      interactions: ol.interaction.defaults({
        altShiftDragRotate: false,
        dragPan: false,
        rotate: false
      }).extend([new ol.interaction.DragPan({kinetic: null})]),
      target: olMapDiv,
      view: view
    });
    view.setCenter(ol.proj.transform([center_lon, center_lat], "EPSG:4326", "EPSG:3857"));
    view.setZoom(initZoom);

    olMapDiv.parentNode.removeChild(olMapDiv);
    gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
} // init_map()
// *******************************************************************
</script>
</head>

<body onload="init_map()">
  <div id="map" class="map">
    <div id="gmap" class="fill"></div>
    <div id="olmap" class="fill"></div>
  </div>
</body>
</html>

 web ページのソース部分は,赤色部分が OpenLayers のライブラリの読み込み関連の部分であり,灰色部分は web の基本的な要素である。 青い部分は,Google Map の定義部分である。 ここでは option が沢山書いてあるが,デフォルトの設定そのままでよい場合は記述しなくてもよい。 ただし,ここで無効(false に設定)にしておかないと,OpenLayers の機能とダブってしまってうまく働かないものもある。 例えば「disableDoubleClickZoom」や「zoomControl」は false にしておかないとうまくいかないと思われる。 気になる方は試してみてはいかがだろうか?
 ちなみに,「zoomControl」を false してるので,「zoomControlOptions」の項目はいらないが,こういう指定もある,ということで載せてある。

 水色の部分は ol.View クラス関連であり,中心や zoom の設定を行っている。

 緑色部分は,KML 経路データをベクトルレイヤーとして読み込んでいる。

 紫色の部分は OpenLayers の ol.Map クラスとしての map 変数を定義している。 ここで,interaction(地図に対する操作に関する部分)に追加 (extent) された項目がある。 また,数行下で Google Map を読み込むためのおまじないが2行書かれている。 どうやら,この2行が肝心みたいである。

 これで Google Map を読み込んで,その上に KML 経路データを記述できる。 「その15」のサンプルを具体的な web ページとして用意したので,具体的な表示を見てみて欲しい。 (ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます)

その16:OpenLayers v3 で Google Map と地理院地図を重ねるに続く

0 件のコメント: