在vue上使用cesium开发三维地图-点击波纹特效

以前端webGIS开发工程师的角度,讲述关于GIS的知识,带大家快速了解下webGIS的知识。

在vue上使用cesium开发三维地图-点击波纹特效
推荐使用NSDT 3DConvert进行3D模型格式转换,支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换,在转换过程中,能够很好的保留模型原有的颜色、材质等信息。

在上一节,我们实现了定位,点击点位,点位被选中,cesium默认的特效,就是在点位周围多了一个绿色的四脚框,太丑了。

而且,如果我们通过其他方法调用了地图上的点位点击方法,这个四脚框也不会显示出来,那么,我们能不能自己整个点位选中的特效,然后,我在别的地方调用这个方法,也还是可以把这个特效给调用出来

答案是可以的,这次,我们就来实现这个点位点击的特效。

本次实现的效果:

准备

用到的函数:

实现思路

  1. cesiumviewer实例,添加add两个圆弧实体,就和之前的点位实体一样。
  2. 写两个回调函数( Cesium中使用圆的扩散,可以采用回调函数来进行绘制,这样可以可以获得动态扩散的效果)。
  3. 然后通过延时函数setTimeOut,让这2个圆弧实体,间隔一定的时间,调用上面的回调函数,形成一种像波纹一样在扩散的效果。

下面展示代码。

第一,先构造出需要的圆弧:

第二,选中效果:

代码中用到的圆弧图片red_circle.png

第三,使用 , 在鼠标单击的事件调用圆弧特效方法

在vue上使用cesium开发三维地图 - 索引

在vue上使用cesium开发三维地图-常用地图开发框架

在vue上使用cesium开发三维地图-坐标系、webGIS简介

在vue上使用cesium开发三维地图-webgis功能介绍

在vue上使用cesium开发三维地图-地图加载

在vue上使用cesium开发三维地图-地图加载项目学习

在vue上使用cesium开发三维地图-点位加载

在vue上使用cesium开发三维地图-点位弹框

在vue上使用cesium开发三维地图-定位及优化

在vue上使用cesium开发三维地图-点击波纹特效

在vue上使用cesium开发三维地图-波纹特效偏移问题

在vue上使用cesium开发三维地图-点位悬空

在vue上使用cesium开发三维地图-加载三维数据

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号