当前位置：首页 > news >正文

onchange事件实现编辑_Openlayer——绘制可编辑几何要素

news 来源：原创 2024/5/17 4:42:58

在GIS应用中，与地图交互是必不可少的，其中在地图上绘制几何要素是非常重要的功能。比如在周边搜索中，根据绘制的范围搜索其中包含的要素；在地图上绘制点、线、面等要素进行叠加分析，缓冲分析等；绘制线要素并测量距离，绘制面要素并测量面积等，都是在与地图进行交互。

openlayer作为主流的GIS开源库，其很好的实现了几何要素绘制，提供了几何要素绘制的接口ol.interaction.Draw。下面介绍一下绘制几何要素并编辑。

首先实例化一个矢量数据源和矢量图层，设置矢量图层样式并添加到地图容器中。

var source = new ol.source.Vector({        wrapX: false    });    var vector = new ol.layer.Vector({        source: source,        style: new ol.style.Style({            fill: new ol.style.Fill({                color: 'rgba(255, 255, 255, 0.5)'            }),            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);

实例化要素编辑对象，通过接口ol.interaction.Modify实现，并指定可编辑的要素资源，同时加载到地图上。

var modify = new ol.interaction.Modify({        source: source    });    map.addInteraction(modify);

最后添加交互绘制几何要素的方法，实现几何要素的绘制并可编辑。

function addInteractions() {        if (source == null) {            source = new ol.source.Vector({                wrapX: false            });            vector.setSource(source);        }        draw = new ol.interaction.Draw({            source: source,            type: typeSelect.value        });        map.addInteraction(draw);        snap = new ol.interaction.Snap({source: source});        map.addInteraction(snap);    }    typeSelect.onchange = function () {        map.removeInteraction(draw);        map.removeInteraction(snap);        addInteractions();    };    addInteractions();

其中ol.interaction.Snap用于捕获几何要素，捕获到几何要素后便可以对几何要素进行编辑。

效果图如下所示：