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