openlayers官方教程（九）Vector Data—

openlayers官方教程（九）Vector Data——Downloading features

本文主要是介绍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;
});