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

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !