OpenLayers矢量图层在特征标签上的z排序

Question

EDIT: I have filed a bug ticket for this on GitHub: https://github.com/openlayers/ol2/issues/1167

I'm working on a project with OpenLayers and have found the experience quite painful due to the lack of good documentation. I've followed the example here http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/ordering.html to create icons on the map with z-ordering. However, I am also using a variation of the technique here http://openlayers.org/dev/examples/vector-features-with-text.html to create labels for the vectors. Unfortunaely, it seems like OpenLayers does not respect z-ordering properties when it draws labels.

Notice how the green icon is on top of the grey icon (correct), but the green label is below the grey label (incorrect.) Is there a workaround for this?

Here's my code for the layer:

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

Here's my code for the icons:

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

Answer 1

A few things you can try if you haven't already:

I noticed you enabled rendererOptions on your first vector but not your second. You could try adding that to your second layer too.

Also try removing the quotes from "${zIndex}" to simply ${zIndex} since it probably expects an integer.

Answer 2

可能的解决方法是将文本容器更改为图形容器，它将遵循渲染文本的z-index：

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