vue專案中openlayers畫行政區劃（區域範圍），供大家參考，具體內容如下

原理

在地圖上畫需要的範圍，實際上就是在地圖上打上一圈點，然後依次將這些點用線連線，就形成了範圍

引用相應的ol模組

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Map,View,Feature } from 'ol'
import { Style,Icon,Stroke } from 'ol/style'
import { Point,LineString,Polygon } from 'ol/geom'

獲取範圍點

這裡我將點放在json檔案中，然後通過axios讀取
json檔案截圖：

axios.get('static/常德市.json').then((res) => {
 let arr = res.data.coordinates
 let polygonFeature = new Feature({
   type: 'polygon',geometry: new Polygon(arr[0])
  })
  polygonFeature.setStyle(new Style({
   stroke: new Stroke({
   width: 2,color: [255,255,0.8]
   }),fill: new Fill({
   color: [248,172,166,0.2]
   })
   // text: new Text({
   // text: '這是區域'
   // })
  }))
  let polygonLayer = new VectorLayer({
   source: new VectorSource({
   features: [polygonFeature]
   })
  })
  this.gmap.addLayer(polygonLayer)
  })
  axios.get('static/懷化市沅陵縣.json').then((res) => {
  let arr = res.data.coordinates
  let polygonFeature = new Feature({
   type: 'polygon',0.2]
   })
   // text: new Text({
   // text: '這是區域'
   // })
  }))
  let polygonLayer = new VectorLayer({
   source: new VectorSource({
   features: [polygonFeature]
   })
  })
  this.gmap.addLayer(polygonLayer)
  })

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。