Как правильно инициализировать полигоны геойсона с помощью Leaflet.draw при загрузке страницы? - PullRequest
Новая
       44

Как правильно инициализировать полигоны геойсона с помощью Leaflet.draw при загрузке страницы?

0 голосов
/ 19 сентября 2018

Я действительно могу успешно загрузить страницу с нарисованными полигонами геоджонов, но не уверен, что делаю это правильно, поскольку при удалении полигонов поведение удаления / удаления не работает идеально.

Ниже я вставил пример с полным содержимым HTML-страницы (с использованием URL-адресов CDN для файлов javascript и CSS), который вы можете использовать для тестирования проблемы, о которой я говорю.

Три полигона (прямоугольники в геоджоне «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>
...