在vue上使用cesium开发三维地图-波纹特效偏移问题
以前端webGIS开发工程师的角度,讲述关于GIS的知识,带大家快速了解下webGIS的知识。
推荐使用NSDT 3DConvert进行3D模型格式转换,支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换,在转换过程中,能够很好的保留模型原有的颜色、材质等信息。
在上一节,我们已经实现了点位弹框的弹出,点击点位的波纹特效的实现。但是,不知道你有没有发现一个小问题,先看下面的图。
因为这个点位图标,它也不是很小很小,我鼠标点击的时候,我点到了,这个点位的左上方
,弹框 和 特效,都是从点位的左上方
,我鼠标点击的位置,开始出现弹框,出现波纹特效的。
相信聪明的你已经发现问题了,这次,我点击的是这个点位的右下方
,弹框 和 特效,都是从点位的右下方
,我鼠标点击的位置,开始出现弹框,出现波纹特效的。
疑问
为什么会是这种情况,我们看下代码。
发现问题了吗?
我们在接下来 弹框,特效,用到的经纬度
,都是鼠标点击位置的经纬度
,鼠标点击操作,触发单击事件,捕获到鼠标点击的位置,然后处理坐标,最后转化成我们用到的120.xxx,30.xxx这种形式的坐标,但是这个转化之后的坐标,是鼠标点位位置出的坐标,那么我鼠标点击
,左上方
,右下方
,上方
,下方
,只要在这个点位实体的范围里,随便哪块地方点击,弹框和特效都出现在点击的地方,这样是肯定是不行的。
解决
我们要怎么做?肯定是要点位的弹框 和 特效 显示在它应该的位置上,而不是每次鼠标点到哪,就在哪出现,换句话说,弹框和特效的经纬度
,必须是用点位的经纬度
,而不是鼠标的经纬度
。
解决方法:
既然点击特效改成点位的经纬度定位,那么之前的弹框也是用点击位置的经纬度,也要改成点位的经纬度。
弹框这边的偏移量也微调一下。
这样,不管怎么点,弹框 和特效都稳稳的在中心位置,不会再跟着鼠标来回跑啦。
在vue上使用cesium开发三维地图 - 索引
在vue上使用cesium开发三维地图-坐标系、webGIS简介