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, 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",
geometry: new Polygon(arr[0])
})
polygonFeature.setStyle(new Style({
stroke: new Stroke({
width: 2,
color: [255, 255, 0, 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)
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_34893937/article/details/108519026
