微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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: `&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 举报,一经查实,本站将立刻删除。