如何解决Leaflet.Draw:如何以 .geojson 格式导入保存的数据?
我看过leaflet.draw Demo,如何以geojson格式保存数据。 接下来,我想知道如何再次导入数据。通过单击按钮或自动。我没有在文档中找到示例。 leaflet.draw 或插件库中是否有内置的东西?
<body>
<div id="map"></div>
<div id="delete">Wis alles</div>
<a href="#" id="export">Exporteer alles</a>
<script>
const blueIcon = L.icon({
iconUrl: 'assets/parking_bicycle-2.png',iconSize: [32,37],// size of the icon
iconAnchor: [16,// point of the icon which will correspond to marker's location
popupAnchor: [0,-30],// point from which the popup should open relative to the iconAnchor
})
const map = L.map('map').setView([51.7918951,4.6827132],13)
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: `© ${mapLink} Contributors`,maxZoom: 18,}).addTo(map)
const drawnItems = new L.FeatureGroup()
map.addLayer(drawnItems)
const drawControl = new L.Control.Draw({
draw: {
polygon: false,polyline: false,rectangle: false,circle: false,circlemarker: false,marker: {
icon: blueIcon,repeatMode: true,},edit: {
featureGroup: drawnItems,})
map.addControl(drawControl)
map.on('draw:created',(e) => {
const type = e.layerType,layer = e.layer
drawnItems.addLayer(layer)
})
// on click,clear all layers
document.getElementById('delete').onclick = () => {
drawnItems.clearLayers()
}
const exportBtn = document.getElementById('export')
exportBtn.onclick = () => {
// Extract GeoJson from drawnItems
const data = drawnItems.toGeoJSON()
// Stringify the GeoJson
const convertedData =
'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data))
// Create export
exportBtn.setAttribute('href','data:' + convertedData)
exportBtn.setAttribute('download','data.geojson')
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。