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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue3种table表格选项个数的控制方法
Apr 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
php flush类输出缓冲剖析
2008/10/19 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
Vue自定义指令详解
2017/07/28 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
vue中轮训器的使用
2019/01/27 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python ddt实现数据驱动
2018/03/14 Python
Python3处理HTTP请求的实例
2018/05/10 Python
详解python 爬取12306验证码
2019/05/10 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
py-charm延长试用期限实例
2019/12/22 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
python实现发送邮件
2021/03/02 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
迎新晚会策划方案
2014/06/13 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
谢师宴邀请函
2015/02/02 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书