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 18 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue router配置与使用分析讲解
Dec 24 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制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
django 常用orm操作详解
2017/09/13 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python 串口读写的实现方法
2019/06/12 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python hash每次调用结果不同的原因
2019/11/21 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
受资助学生感谢信
2015/01/21 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
高三物理教学反思
2016/02/20 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android