[openlayers05]_Downloading features（下载功能）
1. 说明
-
在用户上传数据并编辑之后，我们希望用户能下载结果。为此，我们将feature data 转为GeoJSON，并创建一个带有
download属性的<a>元素，该元素将触发浏览器的文件保存对话框。同时，我们将在地图上添加一个按钮，让用户清除现有的features，重新开始。 -
实现效果
clear:
download
2. 步骤
2.1 添加按钮
-
需求：需要添加两个按钮，一个按钮用于清除界面（
Clear），一个按钮用于下载修改后的数据（Download） -
修改index.html文件
<div id="tools">
<a id = "clear">Clear</a>
<a id="download" download="features.json">Download</a>
</div>
2.2 修改css文件，设置按钮的样式
- 在 style.css文件中增加：
#tools {
/* 指定元素在文档中的定位方式，为绝对定位方式 */
position: absolute;
/* 距上边界的距离 */
top: 1rem;
/* right CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。 */
/* 设置位置位于右边 */
right: 1rem;
}
#tools a {
/* 指定元素显示的方式为内联块状元素,内联块状元素与其他内联元素相邻，并且具有块状元素的特征，可以设置宽度和高度 */
display: inline-block;
padding: 0.5rem;
/* 设置背景颜色 */
background-color: rgb(231, 217, 217);
/* 设置在鼠标悬停在元素上时，显示的样式 */
cursor: pointer;
/* 设置边框圆角 */
border-radius: 30px;
}
-
设置效果：
2.3 实现Clear功能
- vector source有一个
source.clear()方法，希望点击Clear按钮就能调用source.clear()
const clear = document.getElementById('clear');
// 给clear按钮添加一个监听器，但点击Clear按钮时，就能触发`source.clear()`
clear.addEventListener('click',function(){
source.clear();
});
2.4 实现download功能
- 给source绑定一个"change"事件处理器
- 当source发生变化时，"change"事件处理器会被触发，并将source中所有的要素写入
GeoJSON - 最后，下载链接设置为
GeoJSON格式数据
/**-----------实现download功能
* - 为了序列化(serialize)我们的feature data，我们将用GeoJSON格式
* - 每次source中`change` 事件发生时，我们将序列化features，并为锚元素的`herf`属性构造一个数据URL
*/
const format = new GeoJSON({featureProjection:'EPSG:3857'});//`format`变量是一个Geojson对象
const download = document.getElementById('download');
// - 给source绑定一个"change"事件处理器
// - 当source发生变化时，"change"事件处理器会被触发，并将source中所有的要素写入GeoJSON
// - 最后，下载链接设置为GeoJSON格式数据
source.on('change',function(){
const features = source.getFeatures();//获取features中的所有要素；
const json = format.writeFeatures(features) ; //format是一个GeoJSON对象，将要素写入GeoJSON
download.href =
'data:application/json;charset=utf-8,' + encodeURIComponent(json);
});
3. 完整代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quick Start</title>
<style>
@import "node_modules/ol/ol.css";
</style>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="tools">
<a id = "clear">Clear</a>
<a id="download" download="features.json">Download</a>
</div>
<script src="./main.js" type="module"></script>
</body>
</html>
style.css
@import "node_modules/ol/ol.css";
html,
body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#tools {
/* 指定元素在文档中的定位方式，为绝对定位方式 */
position: absolute;
/* 距上边界的距离 */
top: 1rem;
/* right CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。 */
/* 设置位置位于右边 */
right: 1rem;
}
#tools a {
/* 指定元素显示的方式为内联块状元素,内联块状元素与其他内联元素相邻，并且具有块状元素的特征，可以设置宽度和高度 */
display: inline-block;
padding: 0.5rem;
/* 设置背景颜色 */
background-color: rgb(231, 217, 217);
/* 设置在鼠标悬停在元素上时，显示的样式 */
cursor: pointer;
/* 设置边框圆角 */
border-radius: 30px;
}
main.js
import './style.css';
import Map from 'ol/Map.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import View from 'ol/View.js';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/Vector';
import { transform } from 'ol/proj';
import Draw from 'ol/interaction/Draw';
// 下面用于确定地图中心 center
const center = [114.1692, 30.494]; //EPSG:4326
const transformedCenter = transform(center, 'EPSG:4326', 'EPSG:3857');
const view = new View({
center: transformedCenter,
zoom: 10
});
// 创建地图
const map = new Map({
target: 'map',
view: view
});
// 矢量源
const source = new VectorSource({
format: new GeoJSON(),
url:'./data/hubei.geojson'
})
// 用我们的矢量源创建一个新的layer，并将其添加到地图中
const layer = new VectorLayer({
source:source,
});
map.addLayer(layer); //将图层加入到map中
map.addInteraction(
new Draw({
type:'Polygon',
source: source,
})
);
/**--------实现清除features功能------------------
*
* - vector source有一个source.clear()方法。
* - 我们希望点击Clear按钮就能调用source.clear()
*/
const clear = document.getElementById('clear');
// 给clear按钮添加一个监听器
clear.addEventListener('click',function(){
source.clear();
});
/**-----------实现download功能
*
* - 为了序列化(serialize)我们的feature data，我们将用GeoJSON格式
* - 每次source中`change` 事件发生时，我们将序列化features，并为锚元素的`herf`属性构造一个数据URL
*/
const format = new GeoJSON({featureProjection:'EPSG:3857'});//`format`变量是一个Geojson对象
const download = document.getElementById('download');
// - 给source绑定一个"change"事件处理器
// - 当source发生变化时，"change"事件处理器会被触发，并将source中所有的要素写入GeoJSON
// - 最后，下载链接设置为GeoJSON格式数据
source.on('change',function(){
const features = source.getFeatures();//获取features中的所有要素；
const json = format.writeFeatures(features) ; //format是一个GeoJSON对象，将要素写入GeoJSON
download.href =
'data:application/json;charset=utf-8,' + encodeURIComponent(json);
});