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

お待ちしております。

 

では、今日はこの辺で。

バイ!

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2016.06.30

Google Maps APIsのライブラリ読み込み方法

みなさん、こんにちは!

Google Maps API のライブラリを読み込む方法は1つじゃないってご存知でしたか?

&n・・・

続きを読む

2017.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2018.07.16

新プランの Autocomplete Per Session とは?

みなさん、こんにちは。

今まで Places API の Autocomplete は、1文字単位の課金しかありませんでした。1文字入力する毎・・・

続きを読む

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