Leaflet.Drawで作図したデータをエクスポートする

Leaflet.Drawで作図したデータをGeoJSON形式でエクスポートできるようにしました。[DEMO]をご覧下さい。

Leaflet.Draw

Leafletで作図を行うには、プラグイン[Leaflet.Draw]を使用します。

leaflet_draw

上の図の「作図ツール」で示したアイコンは、leaflet.Drawがちゃんと設定できれば表示され、ライン、ポリゴン(多角形)、四角形、円、ポイントを作図することができるようになります。

作図データのエクスポート

ここで作図したデータは一時的なレイヤに作図され残りません。そこで地図情報としてエクスポートする方法を探しました。参考にしたのはこちら(save from leaflet draw)です。

        document.getElementById('export').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = featureGroup.toGeoJSON();

            // Stringify the GeoJson
            var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

            // Create export
            document.getElementById('export').setAttribute('href', 'data:' + convertedData);
            document.getElementById('export').setAttribute('download','data.geojson');
        }

上から3行目[var data = featureGroup.toGeoJSON();] のfeatureGroupを、leaflet.drawを書いたときに自分で作った作図レイヤ名に置き換えればOKです。これで作図レイヤーをGeoJSON形式に変換して、ダウンロードすることができるようになりました。

leaflet_draw_geojson

エクスポートした作図データを再現する

エクスポートした作図データ(GeoJSON)を地理院地図(http://maps.gsi.go.jp/)に読み込んでみます。

地理院地図の[機能]→[ツール]→[作図・ファイル]とたどっていくと[ファイルから読み込み]というボタンが現れます。ここから、先ほどエクスポートしたGeoJSONデータを選択して[読込を開始]すると、地理院地図上に作図データが展開されます。

chiriin_import

chiriin_import_file

ただし、残念なことに「円」で作図した箇所はGeoJSONでは「Point」形式のデータになってしまうので、読み込むと点として表示されます。「円」を円の形のままエクスポートすることができないか、課題が見つかりました。

chiriin_imported

ともあれ、作図したデータを残すという当初の目的は達成できました。

(式)

広告

Leaflet.Drawで作図したデータをエクスポートする」への1件のフィードバック

  1. ピンバック: Leafletでテキストを作図する | キョウシン・ラボ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中