Leaflet.EditableでgeoJSONを扱う場合の注意

Leaflet.Editableを使用して描画した図形を、geoJsonとして保存したが、保存したgeoJsonをLeaflet.Editableに取り込む時に引っかかった点があるためまとめる。

保存したgeoJsonは以下のようなものとする。

{
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    139.761372,
                    35.694623
                ],
                [
                    139.743776,
                    35.694623
                ],
                [
                    139.743776,
                    35.677239
                ],
                [
                    139.761372,
                    35.677239
                ],
                [
                    139.761372,
                    35.694623
                ]
            ]
        ]
    }
}

失敗例

geoJsonのgeometry typeがpolygonのため、leaflet側ではL.polygonとして扱おうと思ったが、geoJsonのフォーマットと、leafletの各種図形の型は緯度・経度のペアの順序が違うため、単純に読み込めない。

// オブジェクトの作成はできるが、座標がおかしくなる
var polygon = L.polygon(geoJsonData.geometry.coordinates);

これを解決するには、自前で全ての座標に対して緯度・経度の順序を反転させる必要がある。

参考 : https://gis.stackexchange.com/questions/234460/how-to-convert-geojson-to-polygon-in-leaflet

成功例

leafletはgeoJsonフォーマット自体の入出力には対応しているため、geoJsonオブジェクトとして読み込めば正しく扱うことはできる。

// 正常
var geoJsonLayer = L.geoJSON(geoJsonData);

調べた所、Leaflet.EditableはgeoJsonレイヤーの編集には対応しており、各レイヤーに対してenableEditメソッドを呼び出せば編集可能に設定ができる。

leafletの地図を描画し、geoJsonデータを読み込んで編集可能とするサンプルは以下の通り。

// 地図を表示
var map = L.map("map", {editable: true}).setView([38.258595, 137.6850225], 5);
var tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
});
map.addLayer(tileLayer);

// geoJsonレイヤーを作成
var geoJsonLayer = L.geoJSON(geoJsonData, {
    onEachFeature: function(feature, layer){
        layer
        .on("dblclick", L.DomEvent.stop)
        .on("dblclick", layer.toggleEdit);
    }
});
// 先に地図へ追加する
geoJsonLayer.addTo(map);
// レイヤーを編集可能に設定
geoJsonLayer.getLayers().forEach(l => l.enableEdit());

leaflet 1.6.0とLeaflet.Editable 1.2.0の組み合わせでは、enableEditメソッドを呼び出す前にレイヤーが地図に追加されていないとエラーが発生するため、geoJsonLayer.addTo(map);を先に実行している。

参考 : https://github.com/Leaflet/Leaflet.Editable/issues/163