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)
  })

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

赞 (0)

相关推荐

  • vue-openlayers实现地图坐标弹框效果

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

  • Vue+Openlayers自定义轨迹动画

    本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码,供大家参考,具体内容如下 <template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline" target="_bank" >Openla

  • vue+openlayers绘制省市边界线

    vue+openlayers绘制省市边界线

    本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码,供大家参考,具体内容如下 1.创建项目 vue init webpack ol_vue 2.安装ol依赖包 npm install ol 3.引入axios npm install axios --save 文件目录:src/main.js import Vue from 'vue' import router from './router' import App from './App' import axios fro

  • vue使用openlayers实现移动点动画

    本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下 做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有.也就是说官方例子使用的库和我安装的OL库存在一定差异. 后来我还是用笨方法去解决了,最终效果如下: 总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon.

  • vue项目中openlayers绘制行政区划

    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, St

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中使用bpmn为节点添加颜色的方法

    内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • 在vue项目中引用Antv G2,以饼图为例讲解

    我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: <template> <div id="pieChart"></div> </template> js部分: ​//引入G2组件 import G2 from "@antv/g2"; ​ export default { name:"", //数据部分 data(){ retur

  • vue项目中一定会用到的性能优化技巧

    vue项目中一定会用到的性能优化技巧

    目录 引言 性能优化标准 Lighthouse 通用常规优化手段 通用性能优化分析 FCP(First Contentful Paint) LCP(Largest Contentful Paint) SpeedIndex(速度指数) 排查性能瓶颈 分析包内容 利用chorme devtool 的代码覆盖率 针对vue 的特殊优化 图片懒加载 虚拟滚动 vue 中的函数式组件 利用v-show .KeepAlive 复用dom 分批渲染组件 最后 引言 提起性能优化 很多人眼前浮现的面试经验是不是

  • Vue 项目中Echarts 5使用方法详解

    Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

随机推荐