vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场
效果图:
第一步:引入 wind-layer插件
或者
npm install ol-wind
npm install amap-wind
html:
<template><div id="Map" ref="map"></div>
</template>
js
下面展示一些 代码。
// An highlighted block
// 初始化地图initMap() {let vm = this;vm.map = null;vm.map = new AMap.Map('Map', {viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',zoom: 5, //初始化地图层级zooms:[5,7],center: [108.945951, 34.465262], //初始化地图中心点layers: [// 卫星new AMap.TileLayer.Satellite(),// 路网new AMap.TileLayer.RoadNet()],});},// 风场windLayerInfo() {//gfs数据:链接https://a.amap.com/jsapi_demos/static/resource/heatmapData.jsthis.windLayer = new AMapWind.WindLayer(gfs, {windOptions: {globalAlpha: 0.9, // 粒子透明度velocityScale: 1 / 50,//粒子速度paths: 800,//粒子数量colorScale: ["rgb(36,104, 180)","rgb(60,157, 194)","rgb(128,205,193 )","rgb(151,218,168 )","rgb(198,231,181)","rgb(238,247,217)","rgb(255,238,159)","rgb(252,217,125)","rgb(255,182,100)","rgb(252,150,75)","rgb(250,112,52)","rgb(245,64,32)","rgb(237,45,28)","rgb(220,24,32)","rgb(180,0,35)"],//粒子颜色lineWidth: 2,generateParticleOption: false},zIndex: 20,});this.windLayer.appendTo(this.map);},
vue + 高德地图 + wind-layer实现风场相关推荐
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- 利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹 高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示 先完成准备工 ...
- vue+高德地图绘制路径
一.vue+高德地图开发 最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
- vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点 具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局 绘制页面 <div class="Clock"><!-- ...
- vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
- Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景 通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
- vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作 使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
最新文章
- 转载:从集群计算到云计算
- work hard, think harder
- javascript中依赖属性(Dependency Property)的实现
- JavaScript笔记整理
- 浅析SVM中的对偶问题
- php内容模型概念,方便新建各种类型表
- 洛谷 P1454【圣诞夜的极光】
- windows 下 新建 点开头的文件和文件夹
- cacti不能实时刷新流量图_解决Cacti无法正常监视超过100M以上流量的问题
- restsharp简单使用
- matlab符号运算ppt,第5 章Matlab符号运算.ppt
- MCE | 癌相关基因 ALK 参与胖瘦调节
- 别被别人抢走了你的时间
- 马化腾:没有“备胎”会永远被人掐住喉咙
- Stm32f103的can模块配置和调试
- 端到端的文本无关说话人确认的深度神经网络嵌入
- IDEA 出现问题:debugger启动tomcat 报错Address already in use: NET_Bind 解决方案
- Python的.py与Cython的.pxd.pyx.pyd 文件格式之间的主要区别
- 来 CSDN 实习技术编辑,直面改变世界的技术与人物
- 端口号被占用的解决办法