openlayers关于ol-wind的层级堆叠问题失效的解决方案

最新推荐文章于 2024-02-12 22:34:14 发布
最新推荐文章于 2024-02-12 22:34:14 发布
阅读量946 收藏 1
点赞数
分类专栏： openlayers 文章标签： bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q1025387665a/article/details/121339769
版权

前言： 因为项目需求有洋流、海浪、风场，3种粒子效果，所以需要根据zIndex去判断当前粒子的层级是在底图上方还是在底图下方。但是这里会发现一个怪问题，按照正确的zIndex 去设置得不到正确的结果。

不啰嗦，直接说解决方法

来源： https://github.com/sakitam-fdd/wind-layer/issues/73

解决方法

在这里插入图片描述
在生成图层的时候显示的写上属性 className 即可。

liuqing0.0
关注
专栏目录
OpenLayers扩展插件系列之ol-wind：ol-wind介绍和如何在OpenLayers地图中使用ol-wind风场图扩展插件，html和vue中如何使用ol-wind风场图插件
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-20 818
ol-wind 是一个基于 OpenLayers 的 JavaScript 库，用于在 Web 地图上实现风向和风速的可视化效果。ol-wind 主要用于展示风场数据，并以动态、直观的方式展示风向和风速信息。Vue+OpenLayers6实战，OpenLayers6使用wind-layer插件实现风场动态效果ol-wind 库基于 WebGL 技术，能够高效地处理大规模的风场数据，并将其可视化在 OpenLayers 的地图上。
Vue+OpenLayers6扩展插件进阶系列汇总目录：常用OpenLayers地图扩展组件ol-ext、ol-cesium、ol-layerswitcher、ol-geocoder和ol-wind
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-19 1077
OpenLayers 是一个开源的 JavaScript 库，用于在 Web 上创建交互式地图。它本身提供了丰富的功能和组件，但也有一些扩展库可以为其增加更多功能或简化特定任务的实现。以下是一些常见的 OpenLayers 扩展库：ol-ext、ol-cesium、ol-layerswitcher、ol-popup、ol-geocoder和ol-wind等常见扩展库。
OpenLayers风场图
GIS小虫的博客
02-25 2519
用到的插件是ol-wind，作者除了Openlayers风场插件外还有其他平台的，详见wind-layer 获取数据 git里有如何获取数据的介绍，这里记一下我的实践过程。 数据来源是nomads，见下图。git上curl命令里的下载地址现在好像不好使了，所以我用的是GFS 1.00 Degree，点击grib filter可以进入后续的筛选。 一路往后点，到这个页面 上面应该是一些参数啥的，总之就照着git上curl命令里的参数选 或者修改curl命令里的数据源，把filter_gfs.pl改.
z-index失效的几种情况
kk的博客
02-25 2174
z-index失效
openlayers 6+版本绘制风场粒子效果
q1025387665a的博客
11-12 2631
杂话：虽然还是解决了问题了，写文章写博客还是不要做复读机了，给我恶心坏了。 前言：需求不高，就是要做一个风场的粒子效果。大概长这样，线宽、颜色、快慢、数量等 都可以通过配置修改 需知 首先数据是要准确的。长这样。通常这种数据叫做gfs 。我会在本文底部提供一份测试数据。 header 里面就是一系列的描述信息， 接着 安装ol-wind 包。 npm install ol-wind --save OR cnpm install ol-wind --save npm包的示例如下 上图取自h
How many layers and why? An analysis of the model depth in transformers-----transformer问什么叠很多层？
MengYa_Dream的博客
03-15 1445
How many layers and why? An analysis of the model depth in transformers-----transformer问什么叠很多层？那么经过一层transformer就有这个效果了？将从前者transformer输出的结果，再一次作为输入，再次经过transformer，是为了得到注意里效果更高的数据？加强attention map?
openlayers的ol-ext插件包的源码
12-22
openlayers的ol-ext插件包的源码，课程基于openlayers开发局域网地图，可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点搜索查询、路径规划、二三维地图切换等功能，为局域网地图的开发...
Openlayers扩展插件ol-ext ，2022年4月版本v3.2.23
04-11
10. **社区支持**：作为开源项目，ol-ext拥有活跃的开发者社区，不断有新的功能和改进被贡献进来，同时遇到问题也可以寻求社区的帮助。 综上所述，ol-ext v3.2.23为OpenLayers带来了更丰富的地图功能和更好的视觉...
OpenLayers-ol-Draw.js更改
01-11
OpenLayers-ol-Draw.js更改
canvas绘制可更改大小方向颜色的图片符号，以风场符号为例并提供图片下载功能
10-19
使用javascript和canvas绘制可更改大小方向颜色的图片符号，以风场符号为例，可以下载图片
JS 基于 leaflet的风场
12-07
JS 基于 leaflet的风场，包括Demo以及关的测试，地图是基于高德地图
openlayers 风场渲染效果
01-11
openlayers 风场渲染效果，放置风场数据即可使用
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2143
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
【WebGIS】Openlayers流动线与风场效果
weixin_42029283的博客
12-02 3434
【WebGIS】Openlayers流动线与风场效果
openlayers3 + canvas 通过粒子动画展示风场
lazyMan2019的博客
12-12 3072
openlayers3 + canvas 展示风场 原理：将屏幕坐标转换为经纬度，再通过经纬度获取风速风向，再通过canvas绘制 效果： 步骤： 1、随机新建粒子（显示得风得数量，确定生命周期、位置等信息），获取该粒子得风速风向（我是使用双线性内插法）。 2、变为下一个时刻，先将上一个时刻得透明度降低（粒子生命剩余得越少，他就越透明，粒子死亡后不留痕迹），遍历粒子，根据粒子得风速风向，计算出该...
openlayers：实现风场图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 263
openlayers：实现风场图（附完整源码）
openlayers 实现风场效果图
qq_38000851的博客
12-28 6383
要求：在地图中展示风场效果，大致效果如下图 由于不会这方面的原理，只能搬砖，也没啥好说的，下面开始搬砖吧。 开发环境：openlayers5 参考： https://github.com/Esri/wind-js https://github.com/blissvisitor/wind-layer https://github.com/sakitam-fdd/wind-layer 思路： 利用别...
vue 使用ol-wind
05-10
Ol-wind 是一个基于 OpenLayers 的风场可视化库，用于展示气象数据中的风场信息。如果你想在 Vue 中使用 ol-wind，可以按照以下步骤进行操作： 1. 首先，在 Vue 项目中安装 OpenLayers 和 ol-wind： ``` npm install ol ol-wind --save ``` 2. 在 Vue 组件中引入 OpenLayers 和 ol-wind： ```javascript import ol from 'ol'; import olWind from 'ol-wind'; ``` 3. 在组件的 mounted 钩子函数中创建地图和风场图层： ```javascript mounted() { // 创建地图 this.map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); // 创建风场图层 this.windLayer = new olWind.WindLayer({ map: this.map, source: new ol.source.Vector(), windOptions: { projection: 'EPSG:3857', velocityScale: 0.005, colorScale: [], particleAge: 1800, lineWidth: 1, particleMultiplier: 1 / 7000, animate: true } }); } ``` 4. 在组件的 destroyed 钩子函数中销毁地图和风场图层： ```javascript destroyed() { // 销毁地图 this.map.setTarget(null); // 销毁风场图层 this.windLayer.destroy(); } ``` 这样，你就可以在 Vue 中使用 ol-wind 来展示风场数据了。当然，你还需要根据自己的需求来配置风场图层的参数，比如颜色、速度等。具体的使用方式可以参考 ol-wind 的文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值