MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.09.24

Googleマップ上にベクトルタイルを描画してみる

ベクトルタイル描画

みなさん、こんにちは。

前回のブログで紹介したベクトルタイルを 、Google マップ上に描画する方法を調査してみました。

 

色々と探してみたところ、以下の記事が参考になりましたので、紹介いたします。

https://stackoverflow.com/questions/27284251/vector-tiles-with-google-maps-v3

 

今回は、国土地理院が公開している3つのレイヤを描画したいと思います。

レイヤ名タイルURL
道路中心線‘https://cyberjapandata.gsi.go.jp/xyz/experimental_rdcl/{z}/{x}/{y}.geojson
鉄道線‘https://cyberjapandata.gsi.go.jp/xyz/experimental_railcl/{z}/{x}/{y}.geojson
河川中心線‘https://cyberjapandata.gsi.go.jp/xyz/experimental_rvrcl/{z}/{x}/{y}.geojson

 

国土地理院のベクトルタイル情報は以下のサイトをご覧ください。

https://github.com/gsi-cyberjapan/vector-tile-experiment/issues

 

Google Maps JavaScript API でベクトルタイルを描画する場合は、「google.maps.Data」の「loadGeoJson」を使用します。

以下のサンプルのソールは、ベクトルタイルを描画する「CoordMapType」クラスです。


//コンストラクタ
var CoordMapType = function(map, urlbase, style) {
    this.tileSize = new google.maps.Size(256, 256);
    this.map = map;
    this.urlbase = urlbase;
    this.style = style;
    this.infowindow = new google.maps.InfoWindow();
}
//ベクトルタイルを取得
CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div'),
        tileUrl = this.urlbase + zoom + '/' + coord.x + '/' + coord.y + '.geojson';

    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';

    div.dataLayer = new google.maps.Data();
    
    var map = this.map;
    var style = this.style;
    var infowindow = this.infowindow;

    div.dataLayer.loadGeoJson(tileUrl,null, function() {
	div.dataLayer.setStyle(style);
        div.dataLayer.setMap(map);
        div.dataLayer.addListener('click', function(event) {
            infowindow.setContent(event.feature.getProperty('type'));
            infowindow.setPosition(event.latLng);
            infowindow.open(map);
        });
    });
    
    return div;
};
//ベクトルタイルを削除
CoordMapType.prototype.releaseTile = function (tile) {
    if (tile.dataLayer) {
        tile.dataLayer.setMap(null);
    }
};

 

「map.overlayMapTypes.insertAt」で上記クラスをレイヤ毎に生成しオーバレイレイヤとして追加します。

 

//レイヤ定義
var _layers = [
    { name: '道路中心線', id: 'experimental_rdcl',   style: {strokeWeight:2, strokeColor: '#555555'} },
    { name: '鉄道線', id: 'experimental_railcl', style: {strokeWeight:3, strokeColor: '#ff0000'} },
    { name: '河川中心線', id: 'experimental_rvrcl',  style: {strokeWeight:3, strokeColor: '#0000ff'} }
];
//地図初期化
var initMap = function() {
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom : 16,
        center: new google.maps.LatLng(35.7, 139.7)
    });
    map.overlayMapTypes.clear();
    //ベクトルタイルレイヤを追加
    $.each(_layers, function(i, layer) {
        map.overlayMapTypes.insertAt(i, new CoordMapType(_map, 'https://cyberjapandata.gsi.go.jp/xyz/' + layer.id + '/', layer.style));
   })
};

 

以下がデモサイトになります。右上のレイヤを選択すると、ベクトルタイルが描画されます。

Full Screen

 

※国土地理院のベクトルタイルは、ズームレベルが「16」のみ公開されています。ズームレベルを変更すると描画されませんので、ご注意ください。

 

 

いかがでしょうか。意外と簡単にベクトルタイルを描画することができました。

ただ、スタイルの設定など色々と考慮しなければいけない点もありますので、まだまだ改良が必要かと思います。

 

マルティスープでは、Google Maps やオープンソースを利用した地図開発の経験が多数あります。もし、地図に関することでお困りのことがありましたら、是非お問い合わせください。

お待ちしております。

 

では、今日はこの辺で。

バイ!

 

【関連記事】こんな記事も読まれています

2017.01.06

マラソン大会の難易度を高度から判断してみる

みなさん、あけましておめでとうございます!

2017年も本ブログでは、グーグルマップをはじめ地図や位置情報に関するおもしろい情報を発信して・・・

続きを読む

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

2017.05.17

Googleマップで「戦前の23区を見渡せる空中写真」を表示する

みなさん、こんにちは。

国土地理院が、4月28日に「戦前の23区が見渡せる空中写真」を公開しました。

続きを読む

 - GIS, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)