MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.04.23

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

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 の技術的な質問、あるいは地図開発に関する質問などがありましたら、是非マルティスープにお問い合わせください。

では、今日はこの辺で。

 

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

2016.06.22

山梨県立富士山世界遺産センター公式アプリ「ふじめぐり」

みなさん こんにちは!

本日(6/22)、山梨県立富士山世界遺産センターが開館しました!

今回は富士山世界遺産センターと「・・・

続きを読む

2016.08.26

国土地理院の地図でストリートビューを見る

みなさん、こんにちは!

前回、Googleマップで無償地図の「OpenStreetMap」を表示する方法を説明しましたが、今回は同じような形で・・・

続きを読む

2017.03.11

GoogleマップにGeoJsonで図形を描画する

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJson ファイルを使って図形を描画・・・

続きを読む

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

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

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

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

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