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实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
VUE递归树形实现多级列表
Jul 15 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
制作美丽的拉花
2021/03/03 冲泡冲煮
php UBB 解析实现代码
2011/11/27 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
jQuery操作cookie方法实例教程
2014/11/25 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
python插入排序算法实例分析
2015/07/03 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python实现转圈打印矩阵
2019/03/02 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
使用python+whoosh实现全文检索
2019/12/09 Python
django框架auth模块用法实例详解
2019/12/10 Python
python ubplot使用方法解析
2020/01/10 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
linux下进程间通信的方式
2014/12/23 面试题
晚宴邀请函范文
2014/01/15 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
佛光寺导游词
2015/02/10 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书