openlayer 图形交互编辑

来源：互联网发布：java数字图像处理 pdf 编辑：程序博客网时间：2024/06/03 15:06

交互编辑控件：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>

阅读全文

0 0