openlayers3 + canvas 通过粒子动画展示风场

openlayers3 + canvas 展示风场

原理:将屏幕坐标转换为经纬度,再通过经纬度获取风速风向,再通过canvas绘制
效果:
在这里插入图片描述
步骤:
1、随机新建粒子(显示得风得数量,确定生命周期、位置等信息),获取该粒子得风速风向(我是使用双线性内插法)。
2、变为下一个时刻,先将上一个时刻得透明度降低(粒子生命剩余得越少,他就越透明,粒子死亡后不留痕迹),遍历粒子,根据粒子得风速风向,计算出该时刻粒子所在得位置,绘制(g.moveTo(proj.x, proj.y); g.lineTo(p.oldX, p.oldY);就是画线),粒子生命周期变小
3、去除生命结束得粒子,再重新生成粒子(粒子得声明周期是随机得),重复第二步

好久之前写得,代码现在看起来乱七八糟得,主要得代码如下:


//新生成粒子
MotionDisplay.prototype.makeNewParticles = function (animator) {
    this.particles = [];
    for (var i = 0; i < this.n
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue3中使用OpenLayers初次加载叠加图片图层,可以借助OpenLayers和Vue3的生命周期函数来完成。以下是一个简单的示例代码: ```vue <template> <div class="map"> <div id="map" class="map-container"></div> </div> </template> <script> import { onMounted } from 'vue'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import ImageLayer from 'ol/layer/Image'; import ImageStatic from 'ol/source/ImageStatic'; import { fromLonLat } from 'ol/proj'; export default { name: 'MapView', setup() { let map; onMounted(() => { // 创建地图 map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: fromLonLat([116.39, 39.9]), zoom: 10 }) }); // 创建Image图层 const imageLayer = new ImageLayer({ source: new ImageStatic({ url: 'path/to/image.png', // 图片路径 imageSize: [width, height], // 图片大小 projection: map.getView().getProjection(), // 投影 imageExtent: [left, bottom, right, top] // 图片范围 }) }); map.addLayer(imageLayer); }); return { map }; } } </script> <style scoped> .map { width: 100%; height: 100%; } .map-container { width: 100%; height: 100%; } </style> ``` 在上面的示例中,我们使用了Vue3的`onMounted`生命周期函数来创建地图和图层。我们首先导入需要使用的OpenLayers模块,然后在`onMounted`函数中创建地图,并将OSM图层添加到地图中。接下来,我们创建了一个Image图层,并将其添加到地图中。我们使用ImageStatic源来指定要叠加的图片,需要提供图片的路径、大小、投影和范围。最后,我们将Image图层添加到地图中,这样图片就会显示在地图上了。 希望这个示例能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值