openlayers6图形标绘（一）

openlayers6使用ol.interaction.Draw对象进行标绘，具体方法分为创建页面基本元素、调用地图基本服务、创建并添加标绘图层、添加具体ol.interaction.Draw对象。

一、创建页面基本元素

主要设计jsp页面的容器元素，我的很简单，就两个，一个是绘制形状选择下拉框，另一个是地图div容器。

<!--绘制形状选择下拉框-->
<select id="drawType" onchange="drawTypeChange()">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
    <option value="Circle">Circle</option>
    <option value="None">None</option>
</select>
<!--地图div容器-->
<div id="mapDiv"></div>

二、调用地图基本服务

主要调用地图服务(如何创建发布地图服务，可以使用geoserver等工具创建发布，在这里就不描述具体操作过程了)，将地图服务系统显示在jsp页面中。

//创建瓦片图层
function getLayer() {
    layer = new ol.layer.Tile({
        title: "测试",
        source: new ol.source.TileWMS({
            url: 'http://localhost:8100/geoserver/kkk/wms',
            params: { LAYERS: 'aa', VERSION: '1.1.1' }
        })
    });
    return layer;
}
//创建view
function getView(jingdu, weidu, zoomView) {
    var view = new ol.View({
        projection: 'EPSG:4326',
        minZoom: 2,
        maxZoom: 18,
    });
    view.setZoom(zoomView);//以变量的形式（zoomView）传入，需要用setZoom注入，而不能用上面方法
    return view;
}
//创建地图，并将地图显示在jsp中创建的div中
function mapView() {
    layer = getLayer();
    view = getView(117.92733, 36.41410, 8);
    map = new ol.Map({
        target: 'mapDiv',//jsp中的div元素
        layers: [layer],
        view: view
    });
    map.getView().setCenter([117.92733, 36.41410]);
}

三、创建并添加标绘图层

目前在页面中显示的图层是地图底图layer图层，现在再创建一个标绘图层，并放在地图底图layer图层的上面。

drawVectorSource = new ol.source.Vector();//创建数据源
drawVectorLayer = new ol.layer.Vector();//创建标绘图层
drawVectorLayer.setSource(drawVectorSource);//将数据源加入到标绘图层中
map.addLayer(drawVectorLayer);//将标绘图层放到map中，目前map中you2个图层，一个是地图底图（layer），另一个是标绘图层（drawVectorLayer）

四、添加具体ol.interaction.Draw对象

创建用于绘制图形的ol.interaction.Draw对象，并为该对象添加地图交互。

function addInteraction() {
    var value = $("#drawType").val();//选择下拉框的值
    alert(value)
    if (value != 'None') {
        interactionDraw = new ol.interaction.Draw({
            source: drawVectorSource,
            type: value,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        map.addInteraction(interactionDraw);
    }
}

五、函数调用

上面写了很多函数，这些函数在加载jsp页面的时候调用

<script type="text/javascript">
    window.onload=function(){init();}  //jsp页面加载时，自动加载js文件的init()方法
</script>

js的入口
function init() {
    mapView();
    drawVectorSource = new ol.source.Vector();//创建数据源
    drawVectorLayer = new ol.layer.Vector();//创建标绘图层
    drawVectorLayer.setSource(drawVectorSource);//将数据源加入到标绘图层中
    map.addLayer(drawVectorLayer);//将标绘图层放到map中，目前map中you2个图层，一个是地图底图（layer），另一个是标绘图层（drawVectorLayer）
    addInteraction();//创建添加用于绘制图形的ol.interaction.Draw对象
}

在通过绘制形状选择下拉框选择时，要触发创建绘制相应绘制工具的事件，事件执行函数如下

function drawTypeChange() {
    map.removeInteraction(interactionDraw);//移除原来的
    addInteraction();
}

六、效果