Vue+OpenLayer为地图添加风场效果

2024-11-29 20:39:51

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

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

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

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风场效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue+OpenLayer实现测距功能

目录前言引入相关库文件绘制提示文字鼠标绘制线设置距离信息窗绘制完成取消绘制全部代码前言首先呢说明一下,我是跟着一个大佬学的,所以我是个小次佬,openlayer的官网上面给出了案例,但是习惯vue开发的我完全不理解,关键是连注释都没多少,而且我 openlayer 用的本来就不多. 然后这里分享一下官网的测距案例引入相关库文件这个库文件直接按照官网的来就可以了. 首先说一个事情哈,官网用的案例是地图使用的 EPSG:3857, 如果我们改成 EPSG:4326,测量数据不
vue使用openlayers创建地图

vue项目中使用openlayers创建地图,供大家参考,具体内容如下前期准备安装node环境安装cnpm 安装vue-cli 以上步骤网上都有很多教程搭建vue项目 vue create vue-ol 按照提示一步步搭建vue项目 cd vue-ol npm run serve 浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面 vue项目安装openlayers cnpm i ol --s main.js中引入ol.css import 'ol
vue-openlayers实现地图坐标弹框效果

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma
Vue+Openlayers实现实时坐标点展示

本文实例为大家分享了Vue+Openlayers实现实时坐标点展示的具体代码,供大家参考,具体内容如下直接上代码  <template> <div id="map"&
vue利用openlayers加载天地图和高德地图

目录一.天地图部分 1.在vue中安装openlayers 二.高德地图部分一.天地图部分 1.在vue中安装openlayers npm i --save ol 这里说的vue是基于脚手架构建的. 新建个页面,也就是vue文件,配置好路由.接着就是可以直接放入我的代码运行显示了. <template> <div class="wrapper"> <div>天地图</div> <div class="map"
Vue+OpenLayer为地图添加风场效果

一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址 npm install ol-windy --save 然后我们需要一个数据来绘制风场,我在文件最后上传一下文件. 接下来很简单,就是下面的代码. <template> <div class="home"> <div id="map" ref="map"></div&
基于vue+openlayer实现地图聚合和撒点效果

目录前言: 实现效果: 1.聚合效果: 2.撒点效果: 具体实现步骤: 1.项目中引入openlayer 2.配置(按需引入) 3.实现地图展示 4.撒点功能 5.聚合效果前言: openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3, 风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在vue中引入openlayer并且实现地图撒点效果,甚至是更深层的地图聚合效果呢,本文来分享下vue中地图的实现.目前openlayer的
使用vue引入maptalks地图及聚合效果的实现

1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3.vue页面引入 import * as maptalks from 'maptalks' import {ClusterLayer} from 'maptalks.markercluster' 4.初始化地图并添加聚合 mounted() { let that = this //--0--//地图
vue接入高德地图绘制扇形效果的案例详解

目录 vue接入高德地图绘制扇形需求预想效果代码实现绘制基站第一步绘制基站第二步 - 计算扇形形状计算扇形坐标扇区点击事件原点点击事件 vue接入高德地图绘制扇形为什么又写这一篇呢,主要是因为这个功能高德不支持,只能自己实现,但是呢,我估计很多人会用到这玩意儿.所以说呢,就简单的实现一下,如果有需要的话直接超过去就行,之前写过天地图绘制扇形区域的,如果使用天地图的话可以翻一下我之前的博客,百度地图和这个方法类似,可能就是使用的类不同,这样的话只要原理流程理解的差不多,直接把各个
vue使用高德地图点击下钻上浮效果的实现思路

这里给使用高德地图下钻提供一个思路先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域.以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到'杭州市'这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层. 接下来看代码: 第一步绘制地图: //创建地图 this.map = new AMap.Map("container", { cursor
Vue中使用Openlayer实现加载动画效果

注意:实现动画时不能有scoped!!!! 通过gif <template> <div class="test"> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </div> </template> <script> import "ol/ol.
vue前端页面数据加载添加loading效果的实现

目录前端页面数据加载添加loading效果具体实现全局loading配置 1 再src/componennts/Spinner下面建立一个index.vue 2 再utils下面tools.js 3 再utils下面建议一个request.js 封装的axios请求 4 修改app.vue 前端页面数据加载添加loading效果在前端上传文件或者加载数据的时候会有一段等待时间,如果加上一个loading效果会减轻用户等待的枯燥,这里就来记录学习一下如何实现loading效果. 效果大致如
Vue+Openlayer实现图形的拖动和旋转变形效果

目录前言相关资料实现效果实现步骤前言 openlayer 是有他自己的扩展插件 ol-ext,我们这里用他来实现图形的操作:拖拽.旋转.缩放.拉伸.移动等等功能,以及他的监听事件,毕竟我们作图以后是需要保存数据给后端,存到数据库的. 相关资料 1.ol-ext官方地址:入口 2.ol-ext 对应的资料地址:入口 3.ol-ext 源码gitee地址:入口 4.openlayers 最新官网:入口 5.openlayers 官网api:入口实现效果旋转.拖动图1.实现效果图2
Vue的百度地图插件尝试使用

百度地图插件安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器使用 Bmview 渲

Vue+OpenLayer为地图添加风场效果

相关推荐

随机推荐