Matsup's blog: 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 と地理院地図を重ねるに続く

Matsup's blog

2016年6月25日土曜日

OpenLayers 3 を使ってみよう（その15：OpenLayers v3 で Google Map を表示）

0 件のコメント: