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();
}
           

六、效果