有没有办法将 OpenLayers 功能保存到另一个文件？

Question

我正在使用两张地图，一张是有人可以添加或删除功能的地方（管理文件），另一张是最终用户可以看到的（用户文件）。 但是，在浏览器中刷新后，我无法保存在管理文件中添加的功能。

我想知道是否有办法保存功能并再次拉起它们（对于两个文件）？

//the main map of the app
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([-90.055, 35.147]),
      zoom: 17,

    })
  });
//---------------------------------------------------------
//---------------------------------------------------------
///this creates the markers for the map

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([-90.055, 35.147])),
    name: 'Somewhere else'
  });


  iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'icon.png',
    })
  });

  //Sets specific style for that one point
  iconFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'icon.png',
    })
  }));

  eventFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'icon.png',
    })
  }));

  var eventLayerSource = new ol.source.Vector({
    features: [iconFeature]
  });

//individual layers for the user to switch through based on selection
  var event_Layer = new ol.layer.Vector({
    source: eventLayerSource,
    // style for all elements on a layer
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'icon.png'
      })
    }),
    visible: true,
    tab_name: 'event'
  });

// display popup on click
  map.on('click', function (evt) {
    var coordinate = evt.coordinate;
    console.log(evt.coordinate);
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
  });

  map.on('singleclick', function (evt) {
    var lonLat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    var clickFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat(lonLat)),
      name: window.prompt("Enter name of event","Event name"),
    });
    clickFeature.setStyle(iconStyle);
    clickFeature.setId(clickFeature.get('name'));
    eventLayerSource.addFeature(clickFeature);
  });
  map.on('dblclick', function(evt){
    eventLayerSource.removeFeature(
      eventLayerSource.getFeatureById(prompt("Enter name")));
  })

这是我的管理文件代码。 我很欣赏任何见解，因为我是 Openlayers 的新手。

Answer 1

您可以通过将绘制的要素以 GeoJSON 或 KML 等格式编写，然后以文本文件的形式将它们下载到计算机（只需将按钮添加到 HTML 即可保存/下载）来保存绘制的要素

  function download(data, filename) {
    var blob = new Blob([data], {type: 'text/plain'});
    if (navigator.msSaveBlob) {
      navigator.msSaveBlob(blob, filename);
    } else {
      var link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    }
  }

  document.getElementById('download-geojson').addEventListener('click', function () {
    var text = new ol.format.GeoJSON().writeFeatures(
      source.getFeatures(),
      {
        featureProjection: 'EPSG:3857',
        dataProjection: 'EPSG:4326'
      }
    );
    download(text, 'features.json');
  });

  document.getElementById('download-kml').addEventListener('click', function () {
    var text = new ol.format.KML().writeFeatures(
      source.getFeatures(),
      {
        featureProjection: 'EPSG:3857',
        dataProjection: 'EPSG:4326'
      }
    );
    download(text, 'features.kml');
  });

可以使用拖放再次显示文件中的数据，如https://openlayers.org/en/latest/examples/drag-and-drop.html