特征标签上的 OpenLayers 向量层 z 排序答案

【问题标题】：OpenLayers Vector Layer z-ordering on feature labels特征标签上的 OpenLayers 向量层 z 排序
【发布时间】：2013-11-04 19:05:55
【问题描述】：

编辑：我已在 GitHub 上为此提交了错误票：https://github.com/openlayers/ol2/issues/1167

我正在使用 OpenLayers 开展一个项目，由于缺乏良好的文档，我发现这种体验非常痛苦。我已经按照http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/ordering.html 此处的示例在地图上使用 z 排序创建图标。但是，我也在http://openlayers.org/dev/examples/vector-features-with-text.html 使用了该技术的一种变体来为向量创建标签。不幸的是，OpenLayers 在绘制标签时似乎不尊重 z 排序属性。

请注意绿色图标位于灰色图标之上（正确），但绿色标签位于灰色标签下方（不正确。）是否有解决方法？

这是我的图层代码：

    this.vehicleLayer = new OpenLayers.Layer.Vector("vehicles", {
        // The zIndex is taken from the zIndex attribute of the features
        styleMap: new OpenLayers.StyleMap({ 'default': {
            graphicZIndex: "${zIndex}"
        }}),
        // enable the indexer by setting zIndexing to true
        rendererOptions: {zIndexing: true}
    });

这是我的图标代码：

    iconPrefix = mapView.iconProvider.prefixMapping(vehicle.get('icon'));
    imgUrl = mapView.iconProvider.getIconURL(iconPrefix, trackingStatus, position.get('track'));

    //Vehicle icon
    this.marker = new OpenLayers.Feature.Vector(point, null, {
        'graphicZIndex': this.zIndexState[trackingStatus],
        'externalGraphic': imgUrl,
        'pointRadius': 8,
        'cursor': 'pointer',
        'clickable': true,
        'title': label_text
    });

    this.marker.attributes = {
        'vehicleMapView': this
    };

    //tail label
    if (App.Settings.get('labels')) {
        this.marker.style = _.extend(this.marker.style, {
            pointerEvents: "visiblePainted",
            label: label_text,
            fontColor: trackingStatus !== 'inactive' ? "#222222" : "white",
            fontSize: "12px",
            fontFamily: "Courier New, monospace",
            fontWeight: "bold",
            labelAlign: "lm",
            labelXOffset:12,
            labelOutlineColor: this.statusToColor[trackingStatus],
            labelOutlineWidth: 2.5
        });
        this.marker.attributes = _.extend(this.marker.attributes, {label: label_text});

    }
    layer.addFeatures([this.marker]);

【问题讨论】：

我对标签的 z 排序没有问题。请提供code。可能只是您的“技术变化”出了点问题。
感谢您的回复；我已经用我的代码更新了帖子。
2011 年似乎也有人问过这个问题。但没有答案。 :(lists.osgeo.org/pipermail/openlayers-users/2011-March/…

标签： javascript gis openlayers

【解决方案1】：

如果您还没有尝试，您可以尝试一些事情：

我注意到您在第一个向量上启用了rendererOptions，但没有在第二个向量上启用。您也可以尝试将其添加到您的第二层。

还可以尝试将 "${zIndex}" 中的引号删除为简单的 ${zIndex}，因为它可能需要一个整数。

【讨论】：

谢谢，但所有这些代码都在同一层中。另外，我的代码没有使用styleMapgraphicZIndex 映射器，因为我直接在每个Vector 功能中设置graphicZIndex。我认为这只是 OpenLayers 中的一个错误，因为它们使用 SVG 渲染器来绘制不支持 z-indexing 的标签。这个 bug 的票在“TODO”列表中有这个，但是这个 bug 被标记为已解决，所以我不知道它是否会被支持。
我根据最接近鼠标的功能将功能冒泡到顶部。它与 styleMap 和一些样式规则配合得很好，可以突出我记为“已选择”的那个以及自定义 mousemove 事件。似乎最简单和最直接的规避这个问题的方法是在矢量图层之上使用一层并将其清空并添加浮动特征。如果您只是想重新排序..您必须按顺序重新创建所有向量：|

【解决方案2】：

可能的解决方法是将文本容器更改为图形容器，它会在呈现文本时遵循 z-index：

layer.renderer.textRoot = layer.renderer.vectorRoot;

【讨论】：