Javascript 要素标签上的OpenLayers矢量图层z排序
编辑:我已经在GitHub上为此提交了错误通知单: 我正在使用OpenLayers进行一个项目,由于缺乏良好的文档,我发现这段经历非常痛苦。我已经按照这里的示例在地图上创建了带有z顺序的图标。然而,我在这里也使用了一种技术的变体来为向量创建标签。不幸的是,OpenLayers在绘制标签时似乎不尊重z顺序属性 请注意,绿色图标位于灰色图标的顶部(正确),但绿色标签位于灰色标签的下方(不正确)。是否有解决方法 以下是我的图层代码:Javascript 要素标签上的OpenLayers矢量图层z排序,javascript,gis,openlayers,Javascript,Gis,Openlayers,编辑:我已经在GitHub上为此提交了错误通知单: 我正在使用OpenLayers进行一个项目,由于缺乏良好的文档,我发现这段经历非常痛苦。我已经按照这里的示例在地图上创建了带有z顺序的图标。然而,我在这里也使用了一种技术的变体来为向量创建标签。不幸的是,OpenLayers在绘制标签时似乎不尊重z顺序属性 请注意,绿色图标位于灰色图标的顶部(正确),但绿色标签位于灰色标签的下方(不正确)。是否有解决方法 以下是我的图层代码: this.vehicleLayer = new OpenL
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]);
如果您尚未尝试过,可以尝试以下几项: 我注意到您在第一个向量上启用了
renderoptions
,但在第二个向量上没有启用。您也可以尝试将其添加到第二层
另外,请尝试从
“${zIndex}”
中删除引号,以简单地将其删除为${zIndex}
,因为它可能需要一个整数。可能的解决方法是将文本容器更改为图形容器,并在呈现文本时遵循z索引:
layer.renderer.textRoot = layer.renderer.vectorRoot;
我对标签的z排序没有问题。请提供
code
。可能只是你的“技术变异”出了问题。谢谢你的回复;我已经用我的代码更新了帖子。看起来这也是被问到的。。。2011年。没有回答(谢谢,但是所有这些代码都在同一层中。另外,我的代码没有使用样式映射图形索引映射器,因为我直接在每个向量功能中设置图形索引。我认为这只是OpenLayers中的一个错误,因为它们使用SVG渲染器来绘制标签,而这不支持ort z索引。此错误的票证在“待办事项”中有此项列表,但该错误被标记为已解决,因此我不知道它是否会得到支持。我正在根据最接近鼠标的功能将功能冒泡到顶部。它与styleMap和一些样式规则配合使用,可以点亮我记为“已选”的功能以及自定义mousemove事件。这似乎是最简单和最直接的方法避免此问题的方法是在向量层的顶部使用一个层,然后清空它并添加浮动功能。如果您只是想重新排序..您必须按顺序重新创建所有向量:|