OpenLayers 图形交互编辑

注：当前使用的是 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文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

  
  
      
      图形交互编辑