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 05 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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中使用PDF文档功能
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
小学母亲节活动方案
2014/03/14 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
文明社区申报材料
2014/08/21 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
公司员工手册范本
2015/05/14 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
党员学习型组织心得体会
2019/06/21 职场文书