Downloading features 下载特征结果
上传数据并编辑后,我们想让我们的用户下载结果。 为此,我们将我们的特征数据序列化为 GeoJSON 并创建一个 元素,该元素具有触发浏览器文件保存对话框的下载属性。 同时,我们将在地图上添加一个按钮,让用户清除现有要素并重新开始。
首先,我们需要一些按钮的标签.在index.html的map-container下面添加这些元素:
<div id="tools">
<a id="clear">Clear</a>
<a id="download" download="features.json">Download</a>
</div>
接下来为这些按钮添加样式,以让它们看上去正常些:
#tools {
position: absolute;
top: 1rem;
right: 1rem;
}
#tools a {
display: inline-block;
padding: 0.5rem;
background: white;
cursor: pointer;
}
清除特征是比较容易的部分,所以我们先做这件事。 矢量源有一个 source.clear() 方法。 我们希望单击“清除”按钮来调用该方法,因此我们将在 main.js 中添加一个用于单击的侦听器:
const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
source.clear();
});
为了序列化我们的特征数据以供下载,我们将使用 GeoJSON 格式。 由于我们希望“下载”按钮在编辑过程中随时可用,我们将序列化源中每个更改事件的功能,并为锚元素的 href 属性构造一个数据 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;
});