vue項目中openlayers繪制行政區(qū)劃
更新時間：2020年12月24日 10:26:27 作者：吞肥皂吐泡泡
這篇文章主要為大家詳細介紹了vue項目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue項目中openlayers畫行政區(qū)劃（區(qū)域范圍），供大家參考，具體內(nèi)容如下
原理
在地圖上畫需要的范圍，實際上就是在地圖上打上一圈點，然后依次將這些點用線連接，就形成了范圍
引用相應(yīng)的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: '這是區(qū)域'
// })
}))
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: '這是區(qū)域'
// })
}))
let polygonLayer = new VectorLayer({
source: new VectorSource({
features: [polygonFeature]
})
})
this.gmap.addLayer(polygonLayer)
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項目中npm?install卡住問題解決的相關(guān)資料,文中包括更換npm鏡像源、清除npm緩存、刪除.npmrc文件和升級Node.js版本,需要的朋友可以參考下2024-12-12
websocket實現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue實現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細介紹了vue實現(xiàn)導(dǎo)航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Vuex modules模式下mapState/mapMutations的操作實例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本篇文章主要介紹了詳解VueJs前后端分離跨域問題，詳細介紹了在項目內(nèi)設(shè)置代理（proxyTable）的方式來解決跨域問題，有興趣的可以了解一下2017-05-05
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
近日項目中需要使用信息提示框的功能,ui組件庫使用的是字節(jié)的arco-design-vue,看了一下,現(xiàn)有的Message不滿足要是需求,直接使用message組件的話,改樣式太麻煩,所以本文就本就介紹了基于Vue3+ts封裝一個簡單版的Message組件,需要的朋友可以參考下2023-09-09
Vue2?this?能夠直接獲取到?data?和?methods?的原理分析
這篇文章主要介紹了Vue2?this能夠直接獲取到data和methods的原理分析，因為methods里的方法通過bind指定了this為new?Vue的實例2022-06-06
關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報錯問題
這篇文章主要介紹了vue3?解決getCurrentInstance?打包后線上環(huán)境報錯問題,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05