将Mapbox文本SymbolLayer与图标SymbolLayer

时间:2019-02-06 03:19:10

标签: android mapbox mapbox-android

我目前正在使用类似于official example的方法在Mapbox地图上对符号进行聚类。测试时,我发现图标和文本按预期显示,但是当我与之交互并旋转地图时,文本层似乎失去了与图标层的对齐。

在创建PropertyFactory.iconAnchor对象时,我正在使用PropertyFactory.iconTranslateSymbolLayer properties。我是否缺少用于确保这两层保持相对位置的属性?

如果有帮助,我用来创建SymbolLayer对象的代码如下:

public List<SymbolLayer> createClusterLevelSymbolLayer(int[] layers) {
    List<SymbolLayer> symbolLayers = new ArrayList<>();

    for (int i = 0; i < layers.length; i++) {
        SymbolLayer symbolLayer = new SymbolLayer("cluster-" + i, "points");
        symbolLayer.setProperties(
                iconImage("circle-15"),
                iconTranslate(new Float[]{1f, 13f}),
                iconSize(1.5f),
                iconAnchor(Property.ICON_ANCHOR_BOTTOM)
        );

        Expression pointCount = toNumber(get("point_count"));
        symbolLayer.setFilter(
                i == 0
                        ? all(has("point_count"),
                        gte(pointCount, literal(layers[i]))
                ) : all(has("point_count"),
                        gt(pointCount, literal(layers[i])),
                        lt(pointCount, literal(layers[i - 1]))
                )
        );
        symbolLayers.add(symbolLayer);
    }

    return symbolLayers;
}

public SymbolLayer createClusterTextLayer() {
    return new SymbolLayer("count", "points").withProperties(
            textField(Expression.toString(get("point_count"))),
            textSize(12f),
            textColor(Color.BLACK),
            textIgnorePlacement(true),
            textAllowOverlap(true),
            textAnchor(Property.TEXT_ANCHOR_BOTTOM)
    );
}

编辑(07/02/2019 @ 10:15 am) 按照@riastrad的建议,请在下面找到我遇到的行为的屏幕截图:

Upon booting into the app, the clustered symbol appears just fine, with icon beneath a text layer (aligned well). (上图)引导至应用程序后,聚集的符号看起来很好,在文本层下方具有图标(对齐)。

(在下面)但是,当手势旋转地图时,图标和文本都会分开,直到视图/摄像头位置返回到它们的起点为止

Misaligned text SymbolLayer over icon SymbolLayer (approximate 90 degree rotation)

Misaligned text SymbolLayer over icon SymbolLayer (approximate 180 degree rotation)

1 个答案:

答案 0 :(得分:2)

我相信这是因为您正在为图标SymbolLayer设置icon-translate的值。

根据链接的文档,这表示:

  

图标的锚点已从其原始位置移开。

因此,实质上,您是将文本和图标都固定在底部,但同时又将图标移了Float[]{1f, 13f}

解决方案应该是为text-translate设置相同的值,或者将其从图标SymbolLayer中完全删除。