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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
德生1994机评
2021/03/02 无线电
PHP学习之PHP变量
2006/10/09 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
CSS常用网站布局实例
2008/04/03 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
使用javascript插入样式
2016/03/14 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
详解JavaScript对象的深浅复制
2017/03/30 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
pybind11在Windows下的使用教程
2019/07/04 Python
详解django中Template语言
2020/02/22 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
质量整改报告范文
2014/11/08 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
教学反思怎么写
2016/02/24 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android