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

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

Leaflet.Draw

Leafletで作図を行うには、プラグイン［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形式に変換して、ダウンロードすることができるようになりました。

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

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

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

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

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

（式）