Leaflet Draw и Leaflet Snap со слоями многоугольника geojson

Я пытаюсь включить привязку (с помощью Leaflet Snap) в создаваемом мной приложении Leaflet. Я использую Leaflet Draw. Существующие слои считываются из базы данных в geojson. Я добавляю их в guideLayers и туда же добавляю вновь созданные функции. Это не работает. У кого-нибудь получилось создать что-то подобное? То есть удалось создать новый многоугольник и привязать его к существующим многоугольникам в листовке (слои geojson)? Спасибо, Дэн.

Add geojson to guideLayers code:

function renderLta(_ltas,ltaLayerName) {

L.geoJSON([_ltas.geoJson], {
        name:_ltas.id,
        areaName:_ltas.localThreatAreaName,
        areaDescription:_ltas.localThreatAreaDescription,
        style: function (feature) {
        return _getLtaStyle(1);         
        },      
        onEachFeature: function onEachFeature(feature, layer) {
            ltaLayerName.addLayer(layer);
            guideLayers.push(layer);
            layer.on('click', function(e) {
                if(selectedFeature) {
                    selectedFeature.editing.disable();
                    // Has there been a change? Does the user need to save?
                    // get layer again and redraw
                       drawnItems.removeLayer(selectedFeature);
                       selectedFeature.addTo(map_lta);
                }
                selectedFeature = e.target;
                e.target.editing.enable();
                drawnItems.addLayer(e.target);                              
            });             
        }       
       });

        ltaLayerName.addTo(map);

Add new layer/data to guideLayers code:

        map.on(L.Draw.Event.CREATED, function(event) {
        var layer = event.layer;
        var content = getPopupContent(layer);
        if (content !== null) {
            layer.bindPopup(content);
        }
        drawnItems.addLayer(layer);
        guideLayers.push(layer);
        });

DrawControl Code:

var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly : {
                allowIntersection : false
            }
        },
        draw: {
            polyline: false,
            polygon : { showArea: true, allowIntersection : false, guideLayers: guideLayers, snapDistance: 500 },
            circle: false,
            rectangle: false,
            marker: false,
            circlemarker: false
        }
    });

    map_lta.addControl(drawControl);

    drawControl.setDrawingOptions({
        polygon: { guideLayers: guideLayers, snapDistance: 50 },
   });

person Dan    schedule 23.10.2019    source источник


Ответы (2)


Вы можете использовать следующую библиотеку для рисования и привязки https://www.npmjs.com/package/@geoman-io/leaflet-geoman-free пакеты

а для дополнительных функций, которых нет в вышеупомянутом пакете, вы можете использовать его, особенно для ломаных линий https://www.npmjs.com/package/leaflet-linestring-editor

person Prasad Kulkarni    schedule 21.01.2020
comment
github.com/prasad5795/leaflet-linestring-editor#readme прочтите пример использования или если вам нужен исходный код, вы можете сослаться на репо - person Prasad Kulkarni; 22.01.2020

Я отказался от библиотеки рисования листовок и оснастки и вместо этого использовал библиотеку leaflet-geoman. Привязка работает отлично.

person Dan    schedule 14.01.2020
comment
Вы пробовали эту демонстрацию: leaflet.github.io/Leaflet.draw/ docs / examples / snapping.html - person Silvan; 26.05.2020