openlayers官方教程(九)Vector Data——Downloading features

Downloading features

在上传和编辑数据之后,我们想要用户来下载我们的结果。我们需要将数据序列化为GeoJSON格式,并且创建

用于在浏览器中触发保存文件的downLoad属性。同时在地图上添加一个按钮,让用户可以清除已有要素重新开始。

首先,我们来添加按钮,把下面代码添加到index.html的map-container中:

<div id="tools">
  <a id="clear">Clear</a>
  <a id="download" download="features.json">Download</a>
</div>

再来用CSS控制按钮的样式,增加如下代码到index.html的<style>中:

#tools {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
#tools a {
  display: inline-block;
  padding: 0.5rem;
  background: white;
  cursor: pointer;
}

清除要素很简单,矢量数据源有一个source.clear()方法。我们要通过点击clear来调用方法,所以在main.js中添加按钮的监听:

const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
  source.clear();
});

将要素数据序列化为GeoJSON格式,我们想下载按钮在任何编辑时刻都有效,我们将在每次change的时候序列化features,同时生成data URI。

const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
  const features = source.getFeatures();
  const json = format.writeFeatures(features);
  download.href = 'data:text/json;charset=utf-8,' + json;
});

转载自:https://blog.csdn.net/u011435933/article/details/80489627

You may also like...