vue項目中openlayers繪制行政區劃

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。