Leaflet.Draw：如何以 .geojson 格式导入保存的数据？

编程问答 2022-05-23

问题描述

我看过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: `&copy; ${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 (将#修改为@）

htmljavascriptleafletleaflet.draw