OpenLayers图形绘制三：图形交互编辑
目录
OpenLayer针对图形的修改，提供了交互编辑控件ol.interaction.Modify，可以结合选择要素控件ol.interaction.Select实现。
本示例在加载OpenStreetMap瓦片地图基础上，添加了一个点、线、多边形矢量要素，实现对这些绘制要素的编辑功能，即修改其几何信息。
目录
一、基础代码编写
新建一个ModifyFeatures.html页面，引用OpenLayers开发库，并加载OpenStreetMap瓦片地图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图形交互编辑</title>
<link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
<script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM() //加载OpenStreetMap瓦片地图
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
二、添加编辑的几何图形
编写代码，通过一个矢量图层分别加载单个点、线、多边形矢量要素。
//绘制的几何图形要素
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
var lineFeature = new ol.Feature(new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
var polygonFeature = new ol.Feature(
new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6], [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]])
);
//实例化一个矢量图层Vector作为绘制层
var source = new ol.source.Vector({
features: [pointFeature, lineFeature, polygonFeature]
});
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.2)"
}),
stroke: new ol.style.Stroke({
color: "#ffcc33",
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: "#ffcc33"
})
})
})
});
map.addLayer(vector); //将绘制层添加到地图容器中
三、实现交互编辑
在地图容器中创建一个交互编辑控件(ol.interaction.Modify)实现几何编辑功能。在此，结合选择要素控件(ol.interaction.Select)实现，在选中矢量要素后再进行编辑操作。图形编辑（几何修改）的关键代码如下：
//定义修改几何图形的功能控件
var Modify = {
init: function(){
//初始化一个交互选择控件，并添加到地图容器中
this.select = new ol.interaction.Select();
map.addInteraction(this.select);
//初始化一个交互编辑控件，并添加到地图容器中
this.modify = new ol.interaction.Modify({
features: this.select.getFeatures() //选中的要素集
});
map.addInteraction(this.modify);
//设置激活状态变更的处理
this.setEvents();
},
setEvents: function(){
var selectedFeatures = this.select.getFeatures(); //选中的要素集
//添加选中要素变更事件
this.select.on("change:active", function(){
//遍历选择要素集，返回当前第一个要素（即移除的要素）
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
});
},
setActive: function(active){
this.select.setActive(active); //激活选择要素控件
this.modify.setActive(active); //激活修改要素控件
}
};
Modify.init(); //初始化几何图形修改控件
Modify.setActive(true); //激活几何图形修改控件
代码说明：为实现选中要素后编辑几何图形的功能，封装了一个Modify控件，分别实现初始化init方法，设置事件的setEvents方法、设置是否激活控件的setActive方法。在调用时先调用Modify的init方法进行初始化，然后调用setActive方法激活控件。
1 init：在初始化时首先加载交互选择要素的控件(ol.interaction.Select)，然后加载一个交互编辑控件(ol.interaction.Modify)，在实例化交互编辑控件时设置修改的features为当前选中的要素，最后调用setEvents方法进行选择控件激活状态变更的处理。
2 setEvents：在此方法中为当前选择控件添加激活变更事件，在其事件处理函数中返回当前选择要素集的第一个要素。
3 setActive： 在此方法中分别调用选择控件和编辑控件的setActive方法，对这两个控件的是否激活状态进行控制。
转载自：https://blog.csdn.net/qq_35732147/article/details/81180129
