Vue+Openlayer使用Draw實現交互式繪制線段

場景

Vue中使用Openlayers加載Geoserver發布的TileWMS：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949

在上面的基礎上實現加載地圖顯示，如果要實現在地圖上交互式繪制線段效果如下

 

OpenLayers 中負責勾繪交互的是 interaction 中的 draw interaction，

默認支持繪制的圖形類型包含 Point（點）、LineString（線）、Polygon（面）和Circle（圓）。

觸發的事件包含 drawstart和drawend，分別在勾繪開始時候（單擊鼠標）和結束時候觸發（雙擊鼠標）。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、導入基本模塊

//導入基本模塊
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill,Style,Stroke} from "ol/style";
//導入相關模塊
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { Select, Draw } from 'ol/interaction'

2、聲明draw對象和顯示線的圖層以及存取繪制完之后的坐標數組。

  data() {
    return {
      map: null, // map地圖
      layer:null, //地圖圖層
      lineLayer:null, //線圖層
      draw: null,
      lineSource:null,
      coordinate: [],
   };
  },

3、頁面加載完之后初始化地圖，並聲明各個圖層

  mounted() {
    this.initMap();
  },

方法實現

    initMap() {
      //地圖圖層
      this.layer = new TileLayer({
        source: new TileWMS({
          //不能設置為0，否則地圖不展示。
          ratio: 1,
          url: "http://localhost:8000/geoserver/nyc/wms",
          params: {
            LAYERS: "nyc:nyc_roads",
            STYLES: "",
            VERSION: "1.1.1",
            tiled: true
          },
          serverType: "geoserver",
        }),
      });

      //線的圖層
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
          source: this.lineSource,
      });

      this.map = new Map({
        //地圖容器ID
        target: "map",
        //引入地圖
        layers: [this.layer,this.lineLayer],
        view: new View({
          //地圖中心點
          center: [987777.93778, 213834.81024],
          zoom: 14,
          minZoom:6, // 地圖縮放最小級別
          maxZoom:19,
        }),
      });

4、設置畫筆樣式

      // 獲取點擊地圖的坐標(選中樣式)
      let selectedStyle = new Style({
          fill: new Fill({
              color: 'rgba(1, 210, 241, 0.2)'
          }),
          stroke: new Stroke({
              color: 'yellow',
              width: 4
          })
      })
      // 選擇線的工具類
      this.selectTool = new Select({
          multi: true,
          hitTolerance: 10, // 誤差
          style: selectedStyle // 選中要素的樣式
      })

5、添加交互並調用繪圖工具

      //添加交互
      this.map.addInteraction(this.selectTool)
      //調用繪圖工具並傳遞類型為線，其他類型有Point,LineString,Polygon,Circle
      this.onAddInteraction('LineString')

繪圖工具實現

    // 繪圖工具
    onAddInteraction(type) {
        let self = this
        //勾繪矢量圖形的類
        this.draw = new Draw({
            //source代表勾繪的要素屬於的數據集
            source: self.lineSource,
            //type 表示勾繪的要素包含的 geometry 類型
            type: type
        })

        //繪制結束時觸發的事件
        this.draw.on('drawend', function(e) {
            const geometry = e.feature.getGeometry()
            let pointArr = geometry.getCoordinates()
            self.coordinate.push(pointArr)
            console.log("self.coordinate="+self.coordinate);
            self.removeDraw()
        })
        self.map.addInteraction(this.draw)
    },
    //刪除交互
    removeDraw() {
        this.map.removeInteraction(this.draw)
    },

 

6、完整示例代碼

<template>
    <div id="app">
      <div id="map" class="map"></div>
    </div>
</template>

<script>
//導入基本模塊
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill,Style,Stroke} from "ol/style";
//導入相關模塊
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { Select, Draw } from 'ol/interaction'
export default {
  name: "olMapImageWMSDrawLine",
  data() {
    return {
      map: null, // map地圖
      layer:null, //地圖圖層
      lineLayer:null, //線圖層
      draw: null,
      lineSource:null,
      coordinate: [],
   };
  },
  mounted() {
    this.initMap();
  },
  methods: {

    // 繪圖工具
    onAddInteraction(type) {
        let self = this
        //勾繪矢量圖形的類
        this.draw = new Draw({
            //source代表勾繪的要素屬於的數據集
            source: self.lineSource,
            //type 表示勾繪的要素包含的 geometry 類型
            type: type
        })

        //繪制結束時觸發的事件
        this.draw.on('drawend', function(e) {
            const geometry = e.feature.getGeometry()
            let pointArr = geometry.getCoordinates()
            self.coordinate.push(pointArr)
            console.log("self.coordinate="+self.coordinate);
            self.removeDraw()
        })
        self.map.addInteraction(this.draw)
    },
    //刪除交互
    removeDraw() {
        this.map.removeInteraction(this.draw)
    },
    initMap() {
      //地圖圖層
      this.layer = new TileLayer({
        source: new TileWMS({
          //不能設置為0，否則地圖不展示。
          ratio: 1,
          url: "http://localhost:8000/geoserver/nyc/wms",
          params: {
            LAYERS: "nyc:nyc_roads",
            STYLES: "",
            VERSION: "1.1.1",
            tiled: true
          },
          serverType: "geoserver",
        }),
      });

      //線的圖層
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
          source: this.lineSource,
      });

      this.map = new Map({
        //地圖容器ID
        target: "map",
        //引入地圖
        layers: [this.layer,this.lineLayer],
        view: new View({
          //地圖中心點
          center: [987777.93778, 213834.81024],
          zoom: 14,
          minZoom:6, // 地圖縮放最小級別
          maxZoom:19,
        }),
      });

      // 獲取點擊地圖的坐標(選中樣式)
      let selectedStyle = new Style({
          fill: new Fill({
              color: 'rgba(1, 210, 241, 0.2)'
          }),
          stroke: new Stroke({
              color: 'yellow',
              width: 4
          })
      })
      // 選擇線的工具類
      this.selectTool = new Select({
          multi: true,
          hitTolerance: 10, // 誤差
          style: selectedStyle // 選中要素的樣式
      })
      //添加交互
      this.map.addInteraction(this.selectTool)
      //調用繪圖工具並傳遞類型為線，其他類型有Point,LineString,Polygon,Circle
      this.onAddInteraction('LineString')

    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>