Vue OpenLayer 为地图绘制风场效果


Posted in Vue.js onApril 24, 2022

一个简单的小demo,就是在一个openlayers地图上面添加风场效果。

话不多说,直接进入正题。

首先我们需要安装一个插件。

插件地址:https://www.npmjs.com/package/ol-wind

npm install ol-windy --save

然后我们需要一个数据来绘制风场,我在文件最后上传一下文件。

接下来很简单,就是下面的代码。

<template>
  <div class="home">
    <div id="map" ref="map"></div>
  </div>
</template>

<script>
  import 'ol/ol.css';
  import Draw from 'ol/interaction/Draw';
  import Map from 'ol/Map';
  import Overlay from 'ol/Overlay';
  import View from 'ol/View';
  import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  import { LineString, Polygon } from 'ol/geom';
  import { OSM, Vector as VectorSource } from 'ol/source';
  import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  import { getArea, getLength } from 'ol/sphere';
  import { unByKey } from 'ol/Observable';
  import { WindLayer } from 'ol-wind'
  import gfs from './gfs.json'

  var map = null

  export default {
    name: "Home",
    data() {
      return {
      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      // 初始化地图
      initMap() {
        map = new Map({
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: 'map',
          view: new View({
            center: [120, 35],
            zoom: 5,
            maxZoom: 18,
            projection: 'EPSG:4326',
          }),
        });

        this.addWindyLayer()
      },

      // 添加风流粒子
      addWindyLayer() {
        const windLayer = new WindLayer(gfs, {
          foceRender: false,
          windOptions: {
            globalAlpha: 0.9,  // 粒子透明度
            maxAge: 10,  // 存活最大帧数
            velocityScale: 1/100,  // 粒子速度
            frameRate: 20,  // 每50贞绘制一次
            paths: 5000,  // 粒子数量
            colorScale: () => {
              return "#00b3ef"
            },
            width: 3,
          }
        })
        map.addLayer(windLayer)
      },
    },
  };

</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    position: relative;
  }

  #map {
    height: 100%;
    width: 100%;
  }
</style>

其中 gfs 文件就是风场数据。

gfs文件下载【点这里

然后看效果~

Vue OpenLayer 为地图绘制风场效果

到此这篇关于Vue OpenLayer 为地图绘制风场效果的文章就介绍到这了!


Tags in this post...

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
You might like
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
PHP中SESSION过期设置
2021/03/09 PHP
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python实现简单登陆流程的方法
2018/04/22 Python
python中dict使用方法详解
2019/07/17 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
python开根号实例讲解
2020/08/30 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
信息管理员岗位职责
2013/12/01 职场文书
员工培训邀请函
2014/01/11 职场文书
英文留学推荐信范文
2014/01/25 职场文书
师德师风剖析材料
2014/09/30 职场文书
音乐剧猫观后感
2015/06/04 职场文书
运动会宣传语
2015/07/13 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技