高德地图API城市扫描线效果

标签: 无 分类: 未分类 创建时间:2022-07-24 12:31:58 更新时间:2025-01-17 10:39:24

1.前言

本章的主要内容就是使用高德的API结合Threejs 实现城市扫描线的效果,要是能不用高德,我觉得还是不用,除了底图和交通图之外,api这块还是有很多的问题的。

参考文章:
1.用three.js实现炫酷的城市扫光效果 这个的效果感觉比较高级,主要讲述如何用材质的方式来实现扫光效果
2.使用three.js实现炫酷的3D城市扫光效果 有两种思路:第一种,我们可以回忆下点光源是如何实现的,就是在片元着色器判断该点光源到每一个片元的距离,对吧?按照这种思路,我们如果实现圆环形扫光就可以直接在片元判断该片元是否在这个环形区域内就搞定了,如果是片形扫光我们可以判断该片元是否在该包围盒内对吧。第二种方式:计算uv
这种思路非常简单,就是哪些物体需要扫光效果,我们就为它们整体计算uv,为这个区域预先计算出水平包围盒,然后整体去计算uv,如果我们不需要冲击的效果,可以让物体的高度不影响uv的权重,如果想有冲击的效果则高度应该给一个权重(注:如果实在不理解怎么计算uv,而且你又是用geojson创建的楼宇,那你可以用经纬度直接计算uv,这种方式最简单。所有uv的计算建议在worker中计算)。预处理完uv之后,我们可以想象一下,我们贴什么图,就可以扫出什么形状来,而且还可以用材质动画作出更加炫酷的效果,这些效果可以直接给美工,让他们去做。
3.多光源 这是官方提供的一个多光源的展示效果,但是不是那种扫描整个的圈的效果,不太符合要求。
4.使用Obj 模型 + shader 实线 加载 obj 格式文件加载到 scene中; 使用 ShaderMaterial 材质 这里的源码实现了扫光效果,但是色彩我觉得差了一点。
5.谭术 / threeMap 这里也是一个源码,没有仔细的看。
6.可视化-three.js 城市 波浪特效 城市 扫光 掠过效果 这里有模型,有代码。
7.使用three.js实现炫酷的3D扫光效果后期(shader通道实现扫光效果)
8.高德地图实现marker水波纹雷达扩散覆盖效果 每一帧改变一下circle半径即可。然后多个circle覆盖在一起,按时间差进行绘制,向外扩散时又同步缩减透明度,即可实现水波纹效果。
9.高德地图实现水波纹扩散 这个的代码感觉更加的全,最后我经过修改这个,实现了水波效果
文章目录
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。