当前位置：首页 > article >正文

OpenLayers 图形交互编辑

article 2025/9/16 10:59:02

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

图形要素包括属性信息和几何信息，在实际应用中，不仅需要修改样式信息，也需要修改图形几何信息。在OpenLayers中，一般采用鼠标交互方式修改图形坐标。在OpenLayers5中提供了ol.interaction.Modify交互式控件，可以结合选择要素控件ol.interaction.Select使用。

本节主要介绍加载图形交互编辑。

1. 添加编辑几何图形

创建点、线、面几何图形并添加到地图中。

//绘制的几何图形要素
const pointFeature = new ol.Feature(new ol.geom.Point([11881771, 4588300]));
const lineFeature = new ol.Feature(new ol.geom.LineString([[11421771, 4288300], [12428781, 4288350]]));
const polygonFeature = new ol.Feature(new ol.geom.Polygon([[[11421771, 4228300], [11421771, 3588300], [11521771, 3588300], [11528771, 3688300], [12421771, 3988300]]]));//实例化一个矢量图层Vector作为绘制层
const source = new ol.source.Vector({features: [pointFeature, lineFeature, polygonFeature]
});
const 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: '#ff0000',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#ff0000'})})})
});
//将绘制层添加到地图容器中
map.addLayer(vector);

2. 创建编辑控件

在Modify控件中实现以下三个方法。

init：控件初始化
setEvents：设置事件，为当前选择的控件添加激活变更事件，在其事件处理函数中返回当前选择要素集的第一要素。
setActive：调用选择要素控件和交互式编辑控件setActive方法，控制控件是否激活。

//定义修改几何图形功能控件
const 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 () {//选中的要素const 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);

3. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图形交互编辑</title><meta charset="utf-8" /><link href="../libs/css/ol.css" rel="stylesheet" type="text/css" /><script src="../libs/js/ol-5.3.3.js" type="text/javascript"></script><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style>
</head><body><div id="map" title="地图显示"></div>
</body></html><script>//==============================================================================////============================天地图服务参数简单介绍==============================////================================vec：矢量图层==================================////================================img：影像图层==================================////================================cva：注记图层==================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================////==============================================================================////地图投影坐标系const projection = ol.proj.get('EPSG:3857');const map = new ol.Map({//地图容器div的IDtarget: 'map',view: new ol.View({//地图初始中心点// center: [114.2905, 30.5607],center: [11421771, 4288300],projection: "EPSG:3857",minZoom: 2,zoom: 4})});const gaodeLayer = new ol.layer.Tile({source: new ol.source.XYZ({title: "高德",url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"})})map.addLayer(gaodeLayer)//绘制的几何图形要素const pointFeature = new ol.Feature(new ol.geom.Point([11881771, 4588300]));const lineFeature = new ol.Feature(new ol.geom.LineString([[11421771, 4288300], [12428781, 4288350]]));const polygonFeature = new ol.Feature(new ol.geom.Polygon([[[11421771, 4228300], [11421771, 3588300], [11521771, 3588300], [11528771, 3688300], [12421771, 3988300]]]));//实例化一个矢量图层Vector作为绘制层const source = new ol.source.Vector({features: [pointFeature, lineFeature, polygonFeature]});const 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: '#ff0000',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#ff0000'})})})});//将绘制层添加到地图容器中map.addLayer(vector);//定义修改几何图形功能控件const 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 () {//选中的要素const 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);</script>