Question

实际上，我能够成功加载绘制了geojson多边形的页面，但是由于尝试删除多边形时，删除/删除行为似乎并不完美，因此我不确定我是否使用正确的方法。

在下面的下方，我粘贴了一个示例，其中包含HTML页面的完整内容（使用CDN url表示javascript和CSS文件），可用于测试我正在谈论的问题。

如果您依次单击“删除图层”和“全部清除”，则可以毫无问题地删除三个多边形（geojson“ FeatureCollection”中的矩形）。

如果相反，在刚加载页面时，单击“删除图层”，然后尝试单击矩形之一，则不会将其删除。但是，如果您随后单击“取消”，然后再次单击“删除图层”，则可以单击矩形将其删除。另外，在单击取消之后，似乎只能删除在单击“取消”之前尝试删除的矩形。例如，如果您最初尝试（失败了）删除两个矩形，然后单击“取消”，然后再次单击“删除图层”，则只能删除先前单击的那两个矩形，而不能删除第三个。尽管失败了，但是您可以再次单击“取消”，然后在再次单击“删除图层”之后将其删除。

以上行为不是特定于浏览器的。我已经使用三种Windows 10浏览器（Chrome，Firefox和Edge）对其进行了测试。另外，我正在使用Leaflet（1.3.4）和Leaflet.draw（0.4.14）的最新版本。

问题可能是错误，但可能是页面加载时添加多边形时我做错了什么？

<!DOCTYPE html>
<html>
<head>
    <title>Quick Start - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.14/leaflet.draw.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.14/leaflet.draw.js"></script>

</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
    var geojsonString = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.095086,51.50543],[-0.095086,51.506784],[-0.090108,51.506784],[-0.090108,51.50543],[-0.095086,51.50543]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.094743,51.503044],[-0.094743,51.504682],[-0.090165,51.504682],[-0.090165,51.503044],[-0.094743,51.503044]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.094685,51.500907],[-0.094685,51.502296],[-0.089993,51.502296],[-0.089993,51.500907],[-0.094685,51.500907]]]}}]}';

    var url = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
    var tileLayer = new L.TileLayer(url, {
        maxZoom: 16,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    });
    var map = new L.Map('mapid', {layers: [tileLayer], center: new L.LatLng(51.505, -0.09), zoom: 15 });

    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    editableLayers.addLayer(L.geoJSON(JSON.parse(geojsonString)));

    var options = {
        edit: {
            featureGroup: editableLayers,
            remove: true
        }
    };

    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
        editableLayers.addLayer(e.layer);
    });
</script>
</body>
</html>

加载页面时，用Leaflet.draw初始化geojson多边形的正确方法是什么？

0 个答案: