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方法。在调用时先调用Modifyinit方法进行初始化,然后调用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

You may also like...