OpenLayers 选中移动要素

前言

页面交互的复杂度体现系统使用的难易程度，在开发WebGIS系统过程中，总会涉及要素操作，如何设计才能使交互操作变得简洁呢？OpenLayers提供了一些成熟的交互控件可以做到。

1. 选中和移动控件

Select和Translate分别是选中控件、移动控件，它们都在ol.interaction包下。

Select控件用于选中矢量要素，被选中的要素会进行默认会进行高亮显示，为选中默认样式，也可以自定义设置要素选中样式。该控件支持单选和多选模式。设置multi属性为true，开启多选模式，默认为false。

Translate控件用于要素移动，设置features属性可以移动多个要素。

2. 加载交互控件

加载控件的方式由很多种，具体怎么用看自己喜欢什么方式。先创建好选中和交互控件，并设置translate控件的features属性为select.getFeatures()，即选中获取的要素。

const select = new ol.interaction.Select({
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: "#ffcc009e"
        }),
        stroke: new ol.style.Stroke({
            color: "#00ffcc",
            width: 2.5
        })
    })
})
const translate = new ol.interaction.Translate({
    features: select.getFeatures()
})

第一种加载控件方式，使用map分别加载创建好的控件。

map.addInteraction(select)
map.addInteraction(translate)

第二种加载控件方式：使用map对象的getInteractions方法先获取到控件属性，然后再通过extend方法将选中和移动控件加入到地图交互控件中。

map.getInteractions().extend([select, translate])

第三种加载控件方式：创建好选中和交互控件后，在地图属性interactions直接加载控件。

interactions: ol.interaction.defaults.defaults().extend([select, translate])

3. 完整代码

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

    
    
    

    

    
    
    



    

        OpenLayers 移动要素
    
    

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

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

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

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

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

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