将 Mapbox 文本 SymbolLayer 与图标 SymbolLayer 对齐
Aligning Mapbox text SymbolLayer with icon SymbolLayer
我目前正在使用类似于此 official example 的方法在 Mapbox 地图上对符号进行聚类。测试时,我发现图标和文本按预期显示,但是当我与图标层交互并旋转地图时,文本层似乎失去了与图标层的对齐。
我在创建 SymbolLayer
对象时使用了 PropertyFactory.iconAnchor
和 PropertyFactory.iconTranslate
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:15am)
根据@riastrad 的建议,请在下面找到我遇到的行为的屏幕截图:
(上图) 启动应用程序后,群集符号显示得很好,图标位于文本层下方(对齐良好)。
(下图)但是当打手势旋转地图时,图标和文字都分开,直到view/camera位置返回到它们的起点
我相信这是因为您正在为您的图标 SymbolLayer
设置 icon-translate
的值。
根据链接文档,这代表:
Distance that the icon's anchor is moved from its original placement.
所以本质上您是将文本和图标都固定在底部,但同时您将图标移动 Float[]{1f, 13f}
。
解决方案应该是为您的 text-translate
设置相同的值,或者将其从您的图标 SymbolLayer
中完全删除。
我目前正在使用类似于此 official example 的方法在 Mapbox 地图上对符号进行聚类。测试时,我发现图标和文本按预期显示,但是当我与图标层交互并旋转地图时,文本层似乎失去了与图标层的对齐。
我在创建 SymbolLayer
对象时使用了 PropertyFactory.iconAnchor
和 PropertyFactory.iconTranslate
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:15am) 根据@riastrad 的建议,请在下面找到我遇到的行为的屏幕截图:
(下图)但是当打手势旋转地图时,图标和文字都分开,直到view/camera位置返回到它们的起点
我相信这是因为您正在为您的图标 SymbolLayer
设置 icon-translate
的值。
根据链接文档,这代表:
Distance that the icon's anchor is moved from its original placement.
所以本质上您是将文本和图标都固定在底部,但同时您将图标移动 Float[]{1f, 13f}
。
解决方案应该是为您的 text-translate
设置相同的值,或者将其从您的图标 SymbolLayer
中完全删除。