openlayers学习之绘制点线多边形和矩形(四)

目录

• • 一、构建下拉框
  • 二、定义全局变量
  • 三、创建绘制函数

一、构建下拉框

首先构建一个简单的下拉框，下拉框包含点线多边形和矩形四个类型的元素，每一个option的value对应在openlayers中的value。

<select id="type" style="position: absolute;right: 20px;top: 60px;z-index: 20;width: 100px;height: 30px" title="图形绘制" onchange="selectDraw(this.value)">
    <option value="Point">点</option>
    <option value="LineString">线</option>
    <option value="Polygon">多边形</option>
    <option value="Box">矩形</option>
</select>
           

二、定义全局变量

定义全局的变量draw和vector，方便我们进行控制。

var draw;// global so we can remove it later
var vector;
           

三、创建绘制函数

//选择下拉框进行绘制
selectDraw(document.getElementById("type").value);			//页面初始化后即激活图形绘制函数
function selectDraw(value) {
    map.removeInteraction(draw);			//每次执行先取消上一次的绘制动作
    map.removeLayer(vector);					//每次执行先移除上一次的vector图层
    var source = new ol.source.Vector();		
    vector = new ol.layer.Vector({					//定义vector图层，将绘制的图形加入到vector图层，叠加在地图上展示
        source: source
    });
    if (value !== 'None') {
        var geometryFunction;
        if (value === 'Box') {
            value = 'Circle';						//绘制矩形需将value值设为Circle
            geometryFunction = ol.interaction.Draw.createBox();				//绘制矩形
            draw = new ol.interaction.Draw({
                source: source,
                type: value,
                geometryFunction: geometryFunction
            });
        }else{
            draw = new ol.interaction.Draw({
                source: source,
                type: value						//对应option的value值
            });
        }
        map.addInteraction(draw);
        map.addLayer(vector);
    }
}
           

最终结果如下(颜色有点不明显，凑合看吧，懒得改样式了)：