Leaflet Draw - toGeoJSON

Я все еще новичок в Leaflet и учусь сам. Я создал карту, используя библиотеки Leaflet Draw, которые хорошо работают, и я хотел бы добавить функцию, которая позволяет пользователю сохранять нарисованные элементы в файл GeoJSON. Я пробовал использовать это руководство, но мне все равно не повезло.

Я использую кнопку для функции экспорта:

    <input type='button' id='export' value='Export Feature (.kml)' class='btn' />

Со следующим телом:

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href = "http://openstreetmap.org/copyright">OpenStreetMap</a> ',
        osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
        map = new L.Map('map', { center: new L.LatLng(-29.5, 24.85), zoom: 6 }),
        drawnItems = L.featureGroup().addTo(map);
L.control.layers({
    'Street': osm.addTo(map),
    "Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri</a>'
    })
}, {'Survey Area': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map); 

    map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        }
    }
}));

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;

    drawnItems.addLayer(layer);
}); 

document.getElementById('export').onclick = function(e) {
        // Extract GeoJson from featureGroup
        var data = featureGroup.toGeoJSON();

        // Stringify the GeoJson
        var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

        // Create export
        document.getElementById('export').setAttribute('href', 'data:' + convertedData);
        document.getElementById('export').setAttribute('download','data.geojson');
    }

Я думаю, что проблема связана с featureGroup или drawnItems, но я просто не могу этого понять.

В этой строке var data = featureGroup.toGeoJSON(); - ваша featureGroup называется «drawnItems», поэтому var data = drawnItems.toGeoJSON();

peeebeee 01.05.2018 15:56

Думал, что-то вроде этого, спасибо!

JohnGIS 03.05.2018 09:29
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
935
0

Другие вопросы по теме