Staff Blog

2017.09.24

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

みなさん、こんにちは。

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

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

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

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

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

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 やオープンソースを利用した地図開発の経験が多数あります。もし、地図に関することでお困りのことがありましたら、是非お問い合わせください。

お待ちしております。

では、今日はこの辺で。

バイ！