如何控制同一层内各个 Mapbox 要素的 z 轴？

Question

我正在使用 Android 的 Mapbox Maps SDK 在我的应用程序的地图中显示带有自定义图标的图钉。更具体地说，我正在使用 SymbolLayer API。当用户单击图钉时，它的外观会发生变化以显示它已被选中。然而，点击的图钉通常在其他图钉后面，如下图所示：

所有这些引脚都是来自同一个 Source 的 Feature，添加到同一个 SymbolLayer。

我希望能够使选定的图钉出现在其他图钉上方，为此我试图控制它的 z 轴。我正在尝试使用 PropertyFactory.symbolZOrder(value) 方法，但似乎 Property.SYMBOL_Z_ORDER_VIEWPORT_Y 和 Property.SYMBOL_Z_ORDER_SOURCE 都无济于事。我希望我能够通过 Expression 实现这一目标，但我不知道如何使用它。

有什么想法吗？

Answer 1

这是一个带有解释的示例。在定义符号层时，您应该设置属性 symbolZOrder 和 symbolSortKey。

symbolZOrder 接受以下参数之一：

  // SYMBOL_Z_ORDER: Controls the order in which overlapping symbols in the same layer are rendered

  /**
   * If symbol sort key is set, sort based on that. Otherwise sort symbols by their y-position relative to the viewport.
   */
  public static final String SYMBOL_Z_ORDER_AUTO = "auto";
  /**
   * Symbols will be sorted by their y-position relative to the viewport.
   */
  public static final String SYMBOL_Z_ORDER_VIEWPORT_Y = "viewport-y";
  /**
   * Symbols will be rendered in the same order as the source data with no sorting applied.
   */
  public static final String SYMBOL_Z_ORDER_SOURCE = "source";

因此，如果您希望根据某种逻辑控制符号，您应该使用 SYMBOL_Z_ORDER_AUTO 值。

然后您可以将 symbolSortKey 设置为某个浮点值。

        Style.OnStyleLoaded onStyleLoaded = style -> {
            style.addLayer(new SymbolLayer(SYMBOLS_LAYER, SYMBOLS_SOURCE)
                    .withProperties(
                            iconImage(step(zoom(),
                                    literal("marker_public_base"),
                                    stop(6, get("icon")))),
                            iconIgnorePlacement(true),
                            iconAllowOverlap(true),
                            iconSize(interpolate(
                                    linear(), zoom(),
                                    stop(0, MARKER_SYMBOL_SIZE * .13),
                                    stop(5, MARKER_SYMBOL_SIZE * .33),
                                    stop(9, MARKER_SYMBOL_SIZE))),
                            iconAnchor(ICON_ANCHOR_BOTTOM),
                            textField(get("title")),
                            textSize(interpolate(
                                    linear(), zoom(),
                                    stop(5.9, 0),
                                    stop(6, SYMBOL_TEXT_SIZE * .4),
                                    stop(7, SYMBOL_TEXT_SIZE * .7),
                                    stop(11, SYMBOL_TEXT_SIZE))),
                            textOptional(true),
                            textHaloColor("#ffffff"),
                            textHaloWidth(1f),
                            textHaloBlur(1f),
                            textAnchor(TEXT_ANCHOR_TOP),
                            symbolZOrder(SYMBOL_Z_ORDER_AUTO),
                            symbolSortKey(get("zIndex"))
                    ));

哪里


            points.forEach(point -> {
                Feature feature = Feature.fromGeometry(com.mapbox.geojson.Point.fromLngLat(point.lon, point.lat));
                feature.addStringProperty("id", point.id);
                feature.addNumberProperty("zIndex", point.isPublic? 0f :  point.isSearchResult? 2f : 1f);
                feature.addStringProperty("title", point.name);
                feature.addStringProperty("icon", getIconImageID(point.category, point.isPublic, point.visited));

                symbolsFeatures.add(feature);
            });

如何控制同一层内各个 Mapbox 要素的 z 轴？

How to control the z axis of individual Mapbox features inside the same layer?

android

mapbox

mapbox-android