マルティスープ
Staff Blog

2017.04.23

KML を GeoJSON に変換して描画する

みなさん、こんちには。

最近、Google マイマップを使って図形を描画する機会がありました。

そこで、マイマップの機能を使い、KMLファイルをダウンロードし、Google Maps JavaScript API でKMLをロードしようとしたところ、何と表示されませんでした！　そこまで複雑な図形ではありません。Google Earch や QGIS だと問題なく表示します。

仕方がないので、KML を GeoJSONに変換して描画することにしたました。今回はその方法を説明します。

KMLを GeoJSON に変換する方法としては、下記方法があります。（もっとあると思いますが…）

① QGIS等のソフトを使い、KMLをGeoJson にあらかじめ変換する
② ライブラリを用いて、動的に変換する

今回は、②のライブラリを用いて動的に変換し描画することにしました。

そこで今回使用したのは、MapBox で提供している「togeojson.js」です。

togeojson ライブラリのダウンロード

使い方は、非常に簡単です。KMLファイルを読込み、「togeojson.kml(kml)」と実行するだけです。

なお、kmlファイルの読込みは、d3.js で行いました。

var map = new google.maps.Map(document.getElementById("map"));

// d3 で kmlファイルを読み込む
d3.xml('test.kml', function(kml){
  // GeoJSON に変換
  var geojson = toGeoJSON.kml(kml);
  // map.data に GeoJSON を追加
  map.data.addGeoJson(kml);
  // スタイルの設定
  map.data.setStyle(function(feature) {
    var type = feature.getGeometry().getType();
    if (type === 'LineString') {
      return ({
        strokeColor: feature.getProperty('stroke'),
		strokeWeight: feature.getProperty('stroke-width'),
        zIndex: 1
      });
    } else if (type == 'Polygon') {
      return ({
        strokeColor: feature.getProperty('stroke'),
		strokeWeight: feature.getProperty('stroke-width'),
        fillColor: feature.getProperty('fill'),
        fillOpacity: feature.getProperty('fill-opacity'),
        zIndex: 1
      });
    } else if (type == 'Point') {
       return ({
         icon: {
           url: 'pin.png',
           scaledSize: new google.maps.Size(32, 32)
         }
       });
    }
 });
});

また、図形の範囲でズームする場合は、下記のようにします。図形を描画後、「zoomToGeojson」をコールしてください。

// GeoJSON で追加した図形範囲でズーム
var zoomToGeojson = function() {
  var bounds = new google.maps.LatLngBounds();
  map.data.forEach(function(feature) {
    processPoints(feature.getGeometry(), bounds.extend, bounds);
  });
  map.fitBounds(bounds);
};
var processPoints = function(geometry, callback, thisArg) {
  if (geometry instanceof google.maps.LatLng) {
    callback.call(thisArg, geometry);
  } else if (geometry instanceof google.maps.Data.Point) {
    callback.call(thisArg, geometry.get());
  } else {
    geometry.getArray().forEach(function(g) {
      processPoints(g, callback, thisArg);
    });
  }
};

こちらがサンプルアプリです。テキストボックスにKMLを貼り付けて、「GeoJSONに変換」ボタンをクリックすると、GeoJSON に変換し図形を描画します。

Full Screen

いかがでしょうか。

まだまだ、考慮しなければいけない箇所もたくさんありますが、KML の読込みで上手く行かない場合は、是非こちらをお試しください。

Google Maps API の技術的な質問、あるいは地図開発に関する質問などがありましたら、是非マルティスープにお問い合わせください。

では、今日はこの辺で。