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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了基于Vue寫一個簡單的倒計時按鈕功能，在項目開發(fā)的過程，經(jīng)常會遇到發(fā)送驗證碼，點擊之后有60秒倒計時的按鈕，今天小編就給大家分享實例代碼，需要的朋友參考下吧2018-04-04
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家介紹了Vue3使用Swiper實現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個備受喜愛的框架,而 Vite 作為一個新興的構(gòu)建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個 Vue 3 項目,從創(chuàng)建項目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue.js組件高級特性,結(jié)合實例形式詳細分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue+relation-graph繪制關(guān)系圖實用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實用組件操作方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-09-09
element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案)
圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進來,這篇文章主要介紹了element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案),需要的朋友可以參考下2024-04-04
Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要探討了網(wǎng)頁刷新時,原本隱藏的元素會一閃而過的問題,以及嘗試過的解決方案并未奏效,通過實例代碼介紹了如何處理?Vue3?中隱藏元素刷新閃爍問題,感興趣的朋友跟隨小編一起看看吧2024-10-10