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

时间:2018-11-05 17:45:36

标签: android mapbox mapbox-android

我正在使用Android版Mapbox Maps SDK在我的应用程序的地图中显示带有自定义图标的图钉。更具体地说,我正在使用SymbolLayer API。用户单击图钉时,其外观会更改以显示它已被选中。但是,该单击的图钉通常位于其他图钉之后,如下图所示: enter image description here

所有这些引脚都是来自同一Feature的{​​{1}},并添加到同一Source

我希望能够使选定的引脚出现在其他引脚的上方,为此,我试图控制其z轴。我在玩SymbolLayer方法,看来PropertyFactory.symbolZOrder(value)Property.SYMBOL_Z_ORDER_VIEWPORT_Y都不会有帮助。我希望我可以通过Property.SYMBOL_Z_ORDER_SOURCE来实现这一目标,但是我不知道如何使用它。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

这是一个带有说明的示例。 定义符号图层时,应设置属性symbolZOrdersymbolSortKey

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);
            });