vue项目中openlayers绘制行政区划

 更新时间:2020年12月24日 10:26:27   作者:吞肥皂吐泡泡  
这篇文章主要为大家详细介绍了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)
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue项目中npm install卡住问题解决的详细指南

    Vue项目中npm install卡住问题解决的详细指南

    这篇文章主要介绍了Vue项目中npm install卡住问题解决的相关资料,文中包括更换npm镜像源、清除npm缓存、删除.npmrc文件和升级Node.js版本,需要的朋友可以参考下
    2024-12-12
  • 前端之vue3使用WebSocket的详细步骤

    前端之vue3使用WebSocket的详细步骤

    websocket实现的全双工通信,真真太香了,下面这篇文章主要给大家介绍了关于前端之vue3使用WebSocket的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue实现导航栏效果(选中状态刷新不消失)

    vue实现导航栏效果(选中状态刷新不消失)

    这篇文章主要为大家详细介绍了vue实现导航栏效果,选中状态刷新不消失,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Vuex modules模式下mapState/mapMutations的操作实例

    Vuex modules模式下mapState/mapMutations的操作实例

    这篇文章主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Storybook 7.0 Beta Vue3踩坑解决记录

    Storybook 7.0 Beta Vue3踩坑解决记录

    这篇文章主要为大家介绍了Storybook 7.0 Beta Vue3踩坑解决记录详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 详解VueJs前后端分离跨域问题

    详解VueJs前后端分离跨域问题

    本篇文章主要介绍了详解VueJs前后端分离跨域问题,详细介绍了在项目内设置代理(proxyTable)的方式来解决跨域问题,有兴趣的可以了解一下
    2017-05-05
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解

    Vue数据与事件绑定以及Class和Style的绑定详细讲解

    这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • 基于Vue3+ts封装一个简单版的Message组件

    基于Vue3+ts封装一个简单版的Message组件

    近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下
    2023-09-09
  • Vue2 this 能够直接获取到 data 和 methods 的原理分析

    Vue2 this 能够直接获取到 data 和 methods 的原理分析

    这篇文章主要介绍了Vue2 this能够直接获取到data和methods的原理分析,因为methods里的方法通过bind指定了this为new Vue的实例
    2022-06-06
  • 关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    这篇文章主要介绍了vue3 解决getCurrentInstance 打包后线上环境报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05

最新评论