vue项目中openlayers绘制行政区划


Posted in Vue.js onDecember 24, 2020

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文件截图:

vue项目中openlayers绘制行政区划

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项目中openlayers绘制行政区划

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

Vue.js 相关文章推荐
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
You might like
中篇:安装及配置PHP
2006/12/13 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
js 操作符实例代码
2009/10/24 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python实现textrank关键词提取
2018/06/22 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python操作Jira库常用方法解析
2020/04/10 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
举例说明类变量和实例变量的区别
2016/06/30 面试题
教师简历自我评价
2014/02/03 职场文书
创新型城市实施方案
2014/03/06 职场文书
小班开学寄语
2014/04/04 职场文书
带病坚持工作事迹
2014/05/03 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
爱的承诺书
2015/01/20 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
小学新课改心得体会
2016/01/22 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android