場景

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

Vue中使用Openlayers加載Geoserver發布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

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

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

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

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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({//地圖容器IDtarget: "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,Circlethis.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({//地圖容器IDtarget: "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,Circlethis.onAddInteraction('LineString')},}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>?

總結

以上是生活随笔為你收集整理的Vue+Openlayer使用Draw实现交互式绘制线段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。