javascript - Leaflet geoman - 加载预先存在的多边形到地图

Question

我有以下jsfiddle，想知道如何单击虚拟按钮添加预定义的多边形坐标？

[[[7.43067, 49.109838], [7.43067, 50.331436], [10.135936, 50.331436], [10.135936, 49.109838]]]

我的javasript：

        var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {
        maxZoom: 18,
        attribution: osmAttrib
      });

    // initialize the map on the "map" div with a given center and zoom
    var map = L.map('map').setView([50, 8], 6).addLayer(osm);

    // add leaflet.pm controls to the map
    map.pm.addControls();

    map.on('pm:create', ({
      workingLayer
    }) => {
      self_drawn = map.pm.getGeomanDrawLayers(true)
      console.log(self_drawn.toGeoJSON())
    });


function loadSquare()
{
    console.log("ok load the square");   
}

我的html

<div id="map"></div>

<button ion-button class="button-action" onclick="loadSquare()"  block>Load Square!</button>

前：

点击 Load Square 按钮后，得到一个 gemoan：

Answer 1

使用 Leaflet 中的默认L.GeoJSON对象。

function loadSquare(){
    console.log("ok load the square");   
    L.geoJSON(data).addTo(map); // data = console.log(self_drawn.toGeoJSON())
}