在vue上使用cesium开发三维地图-点击波纹特效
以前端webGIS开发工程师的角度,讲述关于GIS的知识,带大家快速了解下webGIS的知识。
推荐使用NSDT 3DConvert进行3D模型格式转换,支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换,在转换过程中,能够很好的保留模型原有的颜色、材质等信息。
在上一节,我们实现了定位
,点击点位,点位被选中,cesium默认的特效,就是在点位周围多了一个绿色的四脚框
,太丑了。
而且,如果我们通过其他方法调用了地图上的点位点击方法,这个四脚框也不会显示出来,那么,我们能不能自己整个点位选中的特效,然后,我在别的地方调用这个方法,也还是可以把这个特效给调用出来
答案是可以的,这次,我们就来实现这个点位点击的特效。
本次实现的效果:
准备
用到的函数:
实现思路
- 给
cesium
的viewer实例
,添加add
两个圆弧
的实体
,就和之前的点位实体
一样。 - 写两个
回调函数
( Cesium中使用圆的扩散,可以采用回调函数来进行绘制,这样可以可以获得动态扩散的效果)。 - 然后通过延时函数setTimeOut,让这2个圆弧实体,间隔一定的时间,调用上面的回调函数,形成一种像波纹一样在扩散的效果。
下面展示代码。
第一,先构造出需要的圆弧:
第二,选中效果:
代码中用到的圆弧图片red_circle.png
。
第三,使用 , 在鼠标单击的事件
中调用圆弧特效方法
:
在vue上使用cesium开发三维地图 - 索引
在vue上使用cesium开发三维地图-坐标系、webGIS简介