3

编辑：我已经在 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 排序属性。

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

2 回答 2

0

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

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

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

于 2013-11-08T18:17:17.137 回答
0

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

layer.renderer.textRoot = layer.renderer.vectorRoot;
于 2014-03-26T08:36:15.287 回答