mapboxgl中的symbol碰撞检测随笔

在mapboxgl里面,symbol的碰撞检测是通过计算symbol的二维边界框,然后设置顶点透明度来实现symbol淡入淡出效果来模拟碰撞。

GridIndex是一个二维空间数据结构,使用一个 2D 平面作为“视口”——即设备屏幕的平面。

碰撞检测算法的输出用于将每个symbol的目标不透明度设置为 0 或 1。每次通过碰撞检测更新不透明度时,“时钟参数”实质上被重置为零,CPU 重新计算基线“当前不透明度”。将其概念化的一种方法是“如果当前不透明度与目标不透明度不同,则正在进行淡入淡出动画”。

style._updatePlacement中会进行style.placement.updateLayerOpacities来更新opacity,赋值的地方在updateBucketOpacities()方法中,

this.placements里面存储了每个symbol碰撞检测后的结果,例如:

{icon: false,skipFade: false,text: true}

然后根据placements的结果去创建JointOpacityState。

通过placedGlyphBoxes的结果来判断是否渲染,在placeCollisionBox()方法中计算在屏幕空间的矩形位置(tlX, tlY, brX, brY),判断是否在grid范围里,如果在就可以绘制。

创建CollisionFeature实例来构成每个碰撞体,因为要算里面的 anchorX/Y/Z;

在mapboxgl里,在线程里添加symbol的时候,会有个anchor的局部瓦片锚点坐标,如果坐标超出瓦片8192就不会绘制,同时如果是球面模式下,还会对锚点坐标进行投影,具体算法就是根据锚点的局部瓦片坐标,通过tileCoordToECEF()转换成ECEF三维坐标pos(坐标单位是像素),然后再根据当前瓦片的zoom来计算ECEF坐标下的包围盒,根据该包围盒可以计算出ECEF坐标=>球面瓦片相对坐标的变换矩阵normalizationMatrix,将posnormalizationMatrix相乘即可得到投影后的锚点坐标。这个过程完成的是一个从平面的anchor坐标转变成球面的anchor坐标的过程。

tileCoordToECEF()方法里其实是先把锚点的局部瓦片坐标转成经纬度坐标了,然后再转成ECEF坐标,这里与cesium不同的是,地球半径是个常量GLOBE_RADIUS = 1303.7972938088067 = EXTENT / Math.PI / 2.0(该半径的意思就是在0级瓦片下的球半径的像素数,所以单位不是米,是像素),所以算出来的世界坐标是基于像素的。

worldSize计算,可见0级时候就是512,随缩放呈指数变大
scale = Math.pow(2, zoom);
worldSize = tileSzie * scale; // tileSzie = 512

CollisionIndex用于防止symbol重叠的碰撞索引。它跟踪之前的symbol放置的位置,并用于检查新的symbol是否与之前添加的symbol重叠。插入有两个步骤:首先placeCollisionBox/Circles检查是否有空间放置symbol,然后insertCollisionBox/Circles实际将符号放入索引中。两步过程允许成对的符号插入在一起,即使它们重叠。

每个CollisionIndex的范围就是整个屏幕大小,然后再加上一个常量viewportPadding。当一个symbol越过引起它被包含在碰撞检测中的边缘时,它将导致它周围的symbol发生变化。viewportPadding这个值就指定了在视口边缘填充多少像素以进行碰撞检测,以便大量的更改发生在屏幕外。增大这个常数可以提高标签的稳定性,但代价很高。

textPixelRatio = tile.tileSize / EXTENT;
textPixelRatio是个定值。

CollisionFeature表示单个label覆盖的瓦片区域。它与CollisionIndex一起使用,以检查标签是否与任何先前的标签重叠。一个CollisionFeature主要是一组CollisionBox对象。

主要与projectedPoint有关,collisionBox.x1 * tileToViewport值已经很小了,它是字体的位置坐标,所以重点还是在锚点坐标上,看下怎么计算锚点坐标到当前屏幕坐标的映射。

const tlX = collisionBox.x1 * tileToViewport + projectedPoint.point.x;
const tlY = collisionBox.y1 * tileToViewport + projectedPoint.point.y;
const brX = collisionBox.x2 * tileToViewport + projectedPoint.point.x;
const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搞GIS图形的sky.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值