[openlayers03]——Modifying features
Modifying features
1.说明
-
功能：让用户能编辑数据，使用
Modify
结果展示
2. 步骤
- 导入
Modify
import Modify from 'ol/interaction/Modify';
- 创建地图、设置矢量源并加入地图
// 下面用于确定地图中心 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
});
// 1.矢量源
const source = new VectorSource({
format: new GeoJSON(),
url:'./data/hubei.geojson'
})
// 2. 用我们的矢量源创建一个新的layer，并将其添加到地图中
const layer = new VectorLayer({
source:source,
});
map.addLayer(layer);
- 关键：
创建一个连接到向量源的新交互Modify，并将其添加到 map
// 3. 创建一个连接到向量源的新交互，并将其添加到 map
map.addInteraction(
new Modify({
source: source,
})
);
3 .完整代码
- 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 Modify from 'ol/interaction/Modify';
// 下面用于确定地图中心 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
});
// 1.矢量源
const source = new VectorSource({
format: new GeoJSON(),
url:'./data/hubei.geojson'
})
// 2. 用我们的矢量源创建一个新的layer，并将其添加到地图中
const layer = new VectorLayer({
source:source,
});
map.addLayer(layer);
// 3. 创建一个连接到向量源的新交互，并将其添加到 map
map.addInteraction(
new Modify({
source: source,
})
);
- 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>
<script src="./main.js" type="module"></script>
</body>
</html>
分类:
gis
, openlayers
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）