mapboxgl⽂字标注算法基本介绍
Well-placed labels can be the difference between a sloppy map and a beautiful one. Labels need to clearly identify features without obscuring the map.
好的标注位置可以作为潦草的地图和漂亮的地图之间的区别。标签需要清晰地识别要素⽽不模糊地图。
The normal requirements for map labelling are to place labels as clearly as possible without any overlap. Regular maps just need to avoid label overlap for a single, fixed zoom level and rotation.
地图标注的正常要求是尽可能清晰地放置标签,⽽不需要重叠。正常地图只需要对⼀个单⼀的固定缩放级别和旋转来避免标签重叠。
Good label placement is a  that we solve for . We need our label placements to work at any zoom and any rotation. We need labels placements to be continuous, so that labels don’t jump around when zooming or rotating. We need labels to
be seamless across tiles. We need to support changing font sizes as you zoom. And it all needs to be fast.
好的标注安置是我们解决的⼀个难题。我们需要我们的标签放置在任何缩放和任何旋转中都能正常展⽰。我们需要标注安置是渐进型的,这样标签不⾄于在旋转、缩放时跳来跳去。我们需要标注在⽡⽚上上⽆缝地连接。当你缩放时,我们需要⽀持更改字体⼤⼩。⽽且⼀切都需要快速。
Placement needs to support both horizontal labels, as well as curved labels which follow a line. Both types of labels need to behave smoothly when zooming and rotating. Labels can never overlap, even when rotating. Horizontal labels stay horizontal and curved labels rotate with the map. Labels are flipped to avoid being drawn upside down and curved labels smoothly slide along roads.
安置需要同时⽀持⽔平⽂字标注和沿着⼀条曲线弯曲的标注。两种类型的标签都需要在缩放和旋转时表现得很平滑。标签永远不能重叠,即使旋转时也不能重叠。⽔平标签保持⽔平且曲线标签随着地图旋转。⽂本标注会被翻转以避免被渲染成字头向下(⽂字倒置)的情况,弯曲的标签沿着道路平滑滑动。
There is plenty of academic research on label placement, but most of this applies to maps with fixed rotation and with separate zoom levels. Dynamic maps with continuous zooming, panning, and rotation need a completely different approach. Our implementation expands on a paper by Been and Yap that establishes four ideal requirements for continuous and interactive labelling:
标签安置⽅⾯的学术研究很多,但⼤部分都适⽤于固定旋转和分⽴的缩放级别的地图。具有连续缩放、
平移和旋转的动态地图需要完全不同的安置⽅法。我们的实现扩展了由Been 和 Yap编写的论⽂,该论⽂为连续和交互式标签确⽴了四个理想要求:
1. Labels should not disappear when zooming in or appear when zooming out.
2. Labels should not disappear or appear when panning except when sliding out of view.
3. Labels should not jump around, but instead should be anchored.
4. Label placement should be deterministic, no matter how you got to the current view.
1. 标签不应该在放⼤时消失,在缩⼩时出现。
2. 标签不应该在平移时消失或出现,除⾮滑出视图。
3. 标签不应该跳来跳去,⽽是应该被锚定。
4. 标签的位置应该是确定的,⽆论你怎么到当前视图。
The paper provides guidance on implementing this for horizontal labels, but we go further by supporting rotation and curved labels.
该论⽂为⽔平标注的实现提供了指导,但是我们通过⽀持旋转和弯曲标签来更进⼀步完善⽂本安置。
1. Our implementation has two steps:
2.  Preprocessing
3.  Rendering
1. 我们的实现有两个步骤:
2.  预处理
3.  渲染
The rendering step needs to be fast so that Mapbox GL can rerender the entire map every frame for smooth interaction. Most of the placement work happens in the preprocessing step:
1.  Generate anchor points for each label.
2.  Calculate the positions of individual  relative to the anchors.
3.  Calculate the zoom levels at which the labels and glyphs can be shown without overlap.
4.  Calculate the rotation range in which the label can be shown.
渲染步骤需要⾜够快以便为了mapbox gl 能够在每⼀帧中都能重新渲染整个地图以达到顺滑的交互效果。⼤多数的安置个⼯作发⽣在预处理的步骤中:
1.  为每个标签⽣成锚点。
2.  计算各个字形相对于锚点的位置。
3.  计算该标签和符号可以没有重叠显⽰的缩放级别。
4.  计算可以显⽰标签的旋转范围。
Generating anchor points
Each label has an anchor. An anchor is the point at which a label is positioned when zooming or rotating.
每⼀个标签都有⼀个锚点,锚点是指缩放活旋转时被定位位置的点。
Labels for point features have a single anchor, the point.
对于点要素的标签只有⼀个锚点,就是这个点本⾝。
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像素的都插⼊⼀个锚点。缩放时标签之间的距离发⽣变化,因此我们为每个锚添加最⼩缩放级别以保持适当的间距。较少的标签显⽰在较低缩放级别,并且随着您缩放的时候出现更多。
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:
通常这些符号在超出范围时完全隐藏起来,但是在这⾥它们显⽰出了⼀个减少的透明度:
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  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 .
有⼋个可能的⾓度会使得⼀对⽔平标签发⽣碰撞。这些可能碰撞的每⼀个都⽤⼀些三⾓学检验来检验。
弯曲-⽔平旋转碰撞
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.
当⼀个标签的边框的⾓与另⼀个标签的边框的边缘相交时,出现了弯曲⽔平碰撞。对于⼋个包围盒⾓的
每个⾓落,我们计算了⼀个圆(由该点旋转围绕标签的锚)相交于另⼀个盒⼦的边缘的⼀些⾓度。这些就是碰撞开始和结束的⾓度。
Seamlessness
go2map地图北京Mapbox GL downloads vector tiles with data for the area and zoom level it is currently displaying. When new tiles are downloaded and their labels have been placed, an old tile’s label may need to be h
idden to make way for a more important label. This will be handled in a resolution step that has not yet been implemented.
Mapbox GL下载当前显⽰范围和缩放级别的⽮量⽡⽚。当新的⽡⽚下载完成,且它们的标签位置已经计算完成,⼀个旧的⽡⽚的标注可能需要隐藏让位给⼀个更重要的标签。这将在尚未实现的步骤由解析处理。
算法:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。