openlayer 图形交互编辑

交互编辑控件：ol.interaction.Modify
选择要素控件：ol.interaction.Select
实现图形交互编辑步骤
（1）实例化一个交互选择要素控件，添加到map
（2）实例化一个交互编辑控件，添加到map
（3）分别激活两个控件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="libs/ol/ol.css"/>
    <script src="libs/ol/ol-debug.js"></script>
</head>
<body>
<div id="map"></div>
<script>

    //卫星图层
    satlayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            title: "卫星图",
            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
        })

    });
    //卫星图标注层
    satannolayer = new ol.layer.Tile({
        title: "卫星图标注",
        source: new ol.source.XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'
        })
    });




    //绘制点
    //点要素
    var pointFeature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0]),
        name: '点要素'
    });
    //点要素样式
    var pointStyle = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({color: 'blue'}),
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 4
            })
        })
    });
    //点要素绘制图层
    var vectorPoints = new ol.layer.Vector({
        source: new ol.source.Vector({
            features:[pointFeature]
        }),
        style:pointStyle
    });

    //绘制线
    //线要素
    var lineFeature = new ol.Feature({
        geometry: new ol.geom.LineString([[1e7,1e6],[1e6,3e6]]),
        name: '线要素'
    });
    //线要素样式
    var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
        })
    });
    //线要素绘制图层
    var vectorLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [lineFeature]
        }),
        style:lineStyle
    });

    //绘制区要素
    //区要素
    var polygonFeature = new ol.Feature({
        geometry: new ol.geom.Polygon(
            [[[1e6, -1e6],[1e6, 1e6], [3e6, 1e6], [3e6, -1e6],[1e6, -1e6]]]
        ),
        name: '而是一种虚荣'
    });
    //区要素样式
    var polygonStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'red'
        })
    });
    //区要素绘制图层
    var vectorPolygons = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [polygonFeature]
        }),
        style:polygonStyle
    });


    var map = new ol.Map({
        layers: [satlayer, satannolayer,vectorPoints,vectorLines,vectorPolygons],
        target: 'map',//目标地图容器div的id
        view: new ol.View({
            center: [0, 0],
            zoom: 2,
            maxZoom: 18,
            minZoom: 1
        })
    });

    //定义修改几何图形的功能控件
    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);
        },
        setActive: function(active){
            this.select.setActive(active);//激活选择要素控件
            this.modify.setActive(active);//激活修改要素控件
        }
    };
    Modify.init();
    Modify.setActive(true);

</script>
</body>
</html>
openlayer 图形交互编辑

猜你喜欢
