编辑:我已在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]);
答案 0 :(得分:0)
如果您还没有,可以尝试一些事项:
我注意到你在第一个矢量上启用了rendererOptions
但在第二个矢量上没有启用"${zIndex}"
。您也可以尝试将其添加到第二层。
同时尝试将引号从${zIndex}
删除为{{1}},因为它可能需要一个整数。
答案 1 :(得分:0)
可能的解决方法是将文本容器更改为图形容器,它将遵循渲染文本的z-index:
layer.renderer.textRoot = layer.renderer.vectorRoot;