mapbox.gl文字标注算法基本介绍 (2)

For lines, we want to show multiple labels so we interpolate along the line adding an anchor every x pixels. Distance between labels changes when zooming, so we add a minimum zoom level for each anchor to maintain appropriate spacing. Fewer labels are shown at lower zoom levels and more appear as you zoom in.

 

对于线,我们想显示多个标签,所以我们沿着这条线对个x像素的都插入一个锚点。缩放时标签之间的距离发生变化,因此我们为每个锚添加最小缩放级别以保持适当的间距。较少的标签显示在较低缩放级别,并且随着您缩放的时候出现更多。

mapbox.gl文字标注算法基本介绍

 

Generating positioned glyphs for each anchor

For each piece of text we already have a list of glyphs and their positions, but these positions need to be adjusted for curved labels.

对于每一段文本,我们已经有了一个字形和它们位置的列表,但是这些位置对于弯曲标签来说需要调整。

During the render step we can only shift glyphs along a straight line. To draw curved text we need to add multiple copies of glyphs — one for each line segment a glyph appears on. Each of these glyphs have minimum and maximum zoom levels that hide the glyph when it slides off the end of a segment so that only one instance of each original glyph is shown at the same time.

在渲染步骤中,我们只能沿着直线移动字形。要绘制曲面文本,我们需要添加多个字形副本每——一个线段上只出现一个字形。每个字形都有最小和最大缩放级别,当它滑动到段末端时隐藏字形符号,以便每一个原始字形的实例在同一时间只有一个能显示。

Usually these glyphs are completely hidden when out of range, but here they are shown with a reduced opacity:

通常这些符号在超出范围时完全隐藏起来,但是在这里它们显示出了一个减少的透明度:

mapbox.gl文字标注算法基本介绍

 

Restricting the zoom range

To avoid label collisions, we need to restrict the zoom level at which a label is first shown. As you zoom in, labels get spaced further apart, opening room for new labels. Once a label is shown, it will not be hidden as you zoom in.

为了避免文本标注碰撞,我们需要在文本标注第一次显示时限制它的缩放级别。当你放大时,标签间距会进一步增大,为新的标签出现打开空间。一旦标签显示出来,它在放大时就不会被隐藏。

We use an R-tree that contains already-placed labels to narrow down which labels might collide. We then calculate the zoom level at which the two labels will fit side-by-side. It is safe to show the label for any zoom level higher than this one.

我们使用一个r树,它包含已经放置的标签来减少可能会碰撞的标签。然后计算两个标签将并排安装的缩放级别。对于任何缩放级别高于此的级别下显示这个标签是安全的。

Horizontal-horizontal collision

There are eight possible angles at which a pair of horizontal labels could collide. Each of these possible collisions is checked with some trigonometry.

有八个可能的角度会使得一对水平标签发生碰撞。这些可能碰撞的每一个都用一些三角学检验来检验。

 

mapbox.gl文字标注算法基本介绍

 

弯曲-水平旋转碰撞

A curved-horizontal collision occurs when a corner of one label’s bounding box intersects an edge of the other label’s bounding box. For each of the eight bounding box corners, we calculate the angles at which a circle (formed by that point being rotated around the label’s anchor) intersects the edges of the other box. These are the angles at which a collision would begin and end.

当一个标签的边框的角与另一个标签的边框的边缘相交时,出现了弯曲水平碰撞。对于八个包围盒角的每个角落,我们计算了一个圆(由该点旋转围绕标签的锚)相交于另一个盒子的边缘的一些角度。这些就是碰撞开始和结束的角度。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxwzj.html