OpenLayers实现交互绘制点线面

实现OpenLayers交互绘制

这快内容是临时添加进来的，算是提前写完这篇博文，可能存在问题，请大家批评指正，谢谢！

这一部分主要是讲解利用按钮在OpenLayers上进行交互绘制的一个实现过程，代码略微粗糙，后面WebGIS专题中会有更详细的讲解，后续也会慢慢更新WebGIS专题的教程。

一、窗体实现

控件代码（CSS样式自行设计）

<div class="draw-polygon">
    <label style="font-weight: bold;">
        几何图形类型：
    </label>
    <select id="type">
        <option value="None" selected="selected">无</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Polygon">多边形</option>
    </select>
    <button class="tool-button" id="draw-element" onclick="drawFeature()">绘制</button>
</div>

添加完成css代码之后样式如下：
在这里插入图片描述

二、代码实现

2.1 建立全局字段

这里建立全局字段typeSelect通过js提供的getElementById的方法获得select标签下option的选择值
建立draw变量，将绘制的内容存放在draw中通过map的对象添加近地图
实例化矢量数据源作为source

var typeSelect = document.getElementById('type');
var draw;
var source = new ol.source.Vector();

2.2 设置形状样式

// 设置样式
var vectorLayer = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#0055ff'
        }),
        stroke: new ol.style.Stroke({
            color: '#00c033',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#00c033'
            })
        })
    })

})
map.addLayer(vectorLayer);

2.3 建立交互方法

建立addInteraction方法，传入的参数为typeValue，在其中调用OpenLayers的interaction的Draw接口传入source和typeValue并赋值给draw变量，最后调用map的addInteraction方法将draw变量传入。

function addInteraction(typeValue) {
    draw = new ol.interaction.Draw({
        source: source,
        type: typeValue
    });
    map.addInteraction(draw);
}

2.4 按钮点击事件

建立按钮点击事件drawVector()并在其中建立变量typeValue 通过typeSelect的value属性获得，添加if语句判断是否为None，不为None则调用map的removeInteraction()方法清除已经存在的数据，并调用addInteraction(draw)方法绘制。为None则清除数据。

// 点击事件方法
function drawVector() {
    var typeValue = typeSelect.value;
    if (typeValue !== 'None') {
        map.removeInteraction(draw);
        addInteraction(typeValue);
    } else {
        // The callback method clears
        source.clear()
    }
}

2.5 最终实现效果图如下

在这里插入图片描述

三、附js完整源码

3.1 实现方式一

<!-- 加载地图js -->
<script type="text/javascript">
    var typeSelect = document.getElementById('type');
    var draw;
    var source = new ol.source.Vector();
    // 设置样式
    var vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#0055ff'
            }),
            stroke: new ol.style.Stroke({
                color: '#00c033',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#00c033'
                })
            })
        })

    })
    map.addLayer(vectorLayer);

    function addInteraction(typeValue) {
        draw = new ol.interaction.Draw({
            source: source,
            type: typeValue
        });
        map.addInteraction(draw);
    }

    // 点击事件方法
    function drawVector() {
        var typeValue = typeSelect.value;
        if (typeValue !== 'None') {
            map.removeInteraction(draw);
            addInteraction(typeValue);
        } else {
            // The callback method clears
            source.clear()
        }
    }
</script>

3.2 实现方式二

这个实现方式有一个问题就是绘图的时候转点处会带有点样式，目前无法排除

<!-- 加载地图js -->
<script type="text/javascript">
    var map = init("map"); // 初始化地图加载
    // var extent = map.getView().calculateExtent(map.getSize());
    loadLayerControl(map, 'layer-tree');

    var typeSelect = document.getElementById('type');
    var draw;
    var source = new ol.source.Vector();
    // 设置样式
    var vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#0055ff'
            }),
            stroke: new ol.style.Stroke({
                color: '#00c033',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#00c033'
                })
            })
        })

    })
    map.addLayer(vectorLayer);

    function addInteraction() {
        map.removeInteraction();
        var typeValue = typeSelect.value;
        if (typeValue !== 'None'){
            draw = new ol.interaction.Draw({
                source: source,
                type: typeValue
            });
            map.addInteraction(draw);
        } else {
            source.clear();
        }
    }

    // 点击事件方法
    function drawVector() {
        addInteraction();
    }

</script>