腾讯位置服务JavaScript API GL实现文本标记的碰撞避让
以下内容转载自Crape的文章《web页面上的旋转矩形碰撞》 作者:Crape 链接: https://juejin.im/post/5eede991e51d45740950c946 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 前言 本文主要是总结一下web页面中的旋转矩形的碰撞检测,碰撞算法本身并不难,只是需要注意web坐标系在计算中的影响。碰撞检测应该是在游戏等场景中很常见且基础的功能,本文记录了在 JavaScript API GL 遇到了这类碰撞问题的调研和实现的过程。 需求场景 用户在地图上实现MultiLabel文本标注覆盖物时,会由于两个label坐标过近,或者地图的旋转、缩放产生的变化而相互重叠。目前label的背景色均为透明且暂时还不支持配置,文字重叠之后识别度下降很多,就计划先实现label之间的避让功能。检测到两个label碰撞时,根据优先级选择隐藏其中的一个,保证文字的可读性。 确定算法 在JSAPI GL中,label并不是在三维空间中的,而是绘制在屏幕上的,只是会根据用户视角的移动实时计算出label在屏幕坐标中所处的位置,然后在每一帧中进行绘制。label实际上就是一行文字,我们可以把它用一个矩形包围起来,当做整体计算,因为每个字之间的相对位置并不会变