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

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

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

在上一节,我们已经实现了点位弹框的弹出,点击点位的波纹特效的实现。但是,不知道你有没有发现一个小问题,先看下面的图。

因为这个点位图标,它也不是很小很小,我鼠标点击的时候,我点到了,这个点位的左上方,弹框 和 特效,都是从点位的左上方,我鼠标点击的位置,开始出现弹框,出现波纹特效的。

相信聪明的你已经发现问题了,这次,我点击的是这个点位的右下方,弹框 和 特效,都是从点位的右下方,我鼠标点击的位置,开始出现弹框,出现波纹特效的。

疑问

为什么会是这种情况,我们看下代码。

发现问题了吗?

我们在接下来 弹框,特效,用到的经纬度,都是鼠标点击位置的经纬度,鼠标点击操作,触发单击事件,捕获到鼠标点击的位置,然后处理坐标,最后转化成我们用到的120.xxx,30.xxx这种形式的坐标,但是这个转化之后的坐标,是鼠标点位位置出的坐标,那么我鼠标点击左上方右下方上方下方,只要在这个点位实体的范围里,随便哪块地方点击,弹框和特效都出现在点击的地方,这样是肯定是不行的。

解决

我们要怎么做?肯定是要点位的弹框 和 特效 显示在它应该的位置上,而不是每次鼠标点到哪,就在哪出现,换句话说,弹框和特效的经纬度,必须是用点位的经纬度,而不是鼠标的经纬度

解决方法:

既然点击特效改成点位的经纬度定位,那么之前的弹框也是用点击位置的经纬度,也要改成点位的经纬度。

弹框这边的偏移量也微调一下。

这样,不管怎么点,弹框 和特效都稳稳的在中心位置,不会再跟着鼠标来回跑啦。

在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号