- 前面几篇文章已经对OpenLayers的交互、Draw控件的使用和图斑删除有了基本的了解,下面将对OpenLayers的图斑编辑、平移、框选平移进行逐一介绍。
一、编辑图斑
- ol.interaction.Modify类封装了编辑图形的功能,只要将它初始化作为交互控件加入Map对象,就可以对几何图形进行动态编辑。
- 将鼠标移动到已经绘制好的线条或点上面,再移动鼠标,可以对图形进行修改。
- 按住Alt键时,再点击鼠标,可以删除选中的点。
1. Modify类API
1.1 常用属性
- condition:设置一个函数,在修改时监听点击事件,返回一个布尔值表示是否处理该点击事件。比如返回false时,选中点后,点击选中的点再移动鼠标时将不处理移动事件。
- deleteCondition:设置一个函数,返回一个布尔值是否执行删除的操作。
- insertVertexCondition:设置一个函数,返回一个布尔值表示是否添加新的点。比如我们在编辑多边形时,点击多边形上的线条时,默认是可以在点击的位置添加一个点。如果返回值为false,不会添加新的坐标点。
- pixelTolerance:设置捕捉点的像素差,如果设置的很大,离坐标点很远也能捕捉到点,默认值 为10px。
- style:用于修改点或顶点的样式。对于LineString和Polygon类,style将影响它们的顶点;对于Circle类,style将影响沿着圆的点;对于Point,style影响的就是实际的点。如果没有配置的话,就会使用默认的配置,默认配置是蓝色的。
- source:要修改的数据源。如果未提供数据源,则必须提供要修改的Feature。
- features:要修改的Feature。如果未提供Feature,则必须提供数据源。
1.2 常用方法
1.3 常用事件
- modifystart:编辑开始时触发
- modifyend:编辑接触时触发
2.编辑图斑
2.1 实现代码
<template>
<!-- 初始化一个地图容器 -->
<div id="map"></div>
<div style="position: absolute; right: 50px">
<button @click="editFeatures()">编辑</button>
</div>
</template>
<script setup>
import TileLayer from "ol/layer/Tile";
import { OSM } from "ol/source";
import { Feature, View } from "ol";
import { Map } from "ol";
import { onMounted } from "vue";
import { Point, Polygon } from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Icon, Stroke, Style } from "ol/style";
import { DoubleClickZoom, Draw, Modify, Select } from "ol/interaction";
import { fromLonLat } from "ol/proj";
import CircleStyle from "ol/style/Circle";
let map;
let vectorLayer;
let selectedFeature;
let select;
const initialMap = () => {
map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
new VectorLayer({
source: drawSource,
style: new Style({
fill: new Fill({
color: "rgba(255, 255, 255, 0.2)",
}),
stroke: new Stroke({
color: "#ff0033",
width: 2,
}),
image: new CircleStyle({
radius: 3,
fill: new Fill({
color: "#ffcc33",
}),
}),
}),
}),
],
view: new View({
projection: "EPSG:4326",
center: [125.3574397847, 43.8865062907],
zoom: 18,
}),
});
addLayer();
select = new Select({
style: new Style({
fill: new Fill({
color: "rgba(255,0,0,0.5)",
}),
stroke: new Stroke({
color: "rgba(0,0,255,1)",
}),
}),
});
map.addInteraction(select);
select.on("select", (evt) => {
selectedFeature = select.getFeatures().getArray();
});
};
const addLayer = () => {
vectorLayer = new VectorLayer({
source: new VectorSource(),
});
vectorLayer.getSource().addFeature(
new Feature({
geometry: new Polygon([
[
[125.3579180563, 43.888298024],
[125.3587389704, 43.887798338],
[125.3574397847, 43.8865062907],
[125.3579180563, 43.888298024],
],
]),
})
);
map.addLayer(vectorLayer);
map.getView().setCenter([125.3579180563, 43.888298024]);
};
const editFeatures = () => {
if (selectedFeature.length > 0) {
let modify = new Modify({
features: select.getFeatures(),
});
map.addInteraction(modify);
modify.on("modifyend", (evt) => {
console.log(evt);
});
const dblClickInteraction = map
.getInteractions()
.getArray()
.find((interaction) => {
return interaction instanceof DoubleClickZoom;
});
map.removeInteraction(dblClickInteraction);
map.on("dblclick", function () {
map.removeInteraction(modify);
});
}
};
onMounted(() => {
initialMap();
});
</script>
<style scoped>
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
:deep(.ol-attribution) {
display: none;
}
</style>
2.2 实现效果
- 下面是编辑图斑的效果
- 先点击图斑,然后点击编辑按钮即可开始编辑
- 按住ALT键,再使用鼠标左键单击图斑顶点,即可删除当前顶点。
![编辑图斑](https://i-blog.csdnimg.cn/blog_migrate/1908d1c45cdfe48b8167ca9dc5b5386f.gif#pic_center)
二、结语