vue項(xiàng)目中openlayers繪制行政區(qū)劃

更新時(shí)間：2020年12月24日 10:26:27 作者：吞肥皂吐泡泡

這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue項(xiàng)目中openlayers畫(huà)行政區(qū)劃（區(qū)域范圍），供大家參考，具體內(nèi)容如下

原理

在地圖上畫(huà)需要的范圍，實(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文件中，然后通過(guò)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)
  })

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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