openlayers 矢量特征 z-indexing答案

【问题标题】：openlayers vector features z-indexingopenlayers 矢量特征 z-indexing
【发布时间】：2011-02-15 11:59:00
【问题描述】：

我很难理解矢量特征的 z 索引。

当我在网上搜索信息时，我发现了这些链接： http://openlayers.org/dev/examples/ordering.html http://osgeo-org.1803224.n2.nabble.com/Bug-in-using-graphicZIndex-td2648665.html 和 http://osgeo-org.1803224.n2.nabble.com/graphicZIndex-of-vector-features-td3919627.html

我所做的是设置样式，就像它们在第一个链接上显示的那样：

 this.vectorsLayer = new OpenLayers.Layer.Vector("Vectors", {
                styleMap: new OpenLayers.StyleMap({
                    "default": {
                    'strokeColor': "#ff9933",
                    'strokeWidth': 5
                    },
                    "select": {
                        'strokeColor': "#3399ff"
                    }
                })
            }
        );
    this.carsLayer = new OpenLayers.Layer.Vector("Cars", {'rendererOptions': {yOrdering: false, zIndexing: true}});

     this.startIconStyle = {'externalGraphic':this.startIconUrl};

     this.parkIconStyle = {'externalGraphic':this.parkIconUrl};

     this.endIconStyle = {'externalGraphic':this.endIconUrl};

     this.defaultStyles = {
             //'label':getLabel(),
             'graphicZIndex':745,
            'graphicXOffset':-13,
            'graphicYOffset':-41,
            'graphicWidth':26,
            'graphicHeight':41,
            'strokeLinecap':'round',
            'strokeColor':"#000000",
            'strokeWidth':2,
            'strokeOpacity':1,
            'fillOpacity':1}
        //style of path that car has used 
    this.drivedStyle = {
            'strokeWidth': 3,
            'strokeOpacity': 1,
            'strokeColor': "#3399ff",
            'strokeDashstyle': "dash"
        }

当我创建标记时，我会这样做：

var routePoint = this.points[this.routePos].clone();
var newstyleSite = OpenLayers.Util.extend(this.startIconStyle, this.defaultStyles ,OpenLayers.Feature.Vector.style['default']);
this.routePointFeature = new OpenLayers.Feature.Vector(routePoint, {}, newstyleSite);
this.vectorsLayer.addFeatures(this.routePointFeature);

当我查看该标记的 z-index 时 - z-index 设置为 auto 而不是 745，它位于 this.defaultStyles 中。

这将我们带到第三个链接...我根本无法理解，因为在其他任何地方设置样式都提供了与我现在得到的一样多的东西。

也没有

this.routePointFeature.attributes.zIndex = 745;

改变任何东西。即使它显然适用于第一个链接/示例。

这个 z 索引应该如何工作？为什么它在我的情况下不起作用？我究竟做错了什么？还是那里有什么问题？

编辑：很多人都看过这个问题并赞成答案。然而，我不得不处理其他事情，并且有一段时间没有与 opelayers 合作过。看到此答案的某些人能否确认该答案有效，以便我接受？

艾伦

【问题讨论】：

标签： javascript openlayers

【解决方案1】：

您必须为矢量图层启用 z 索引。

this.vectorsLayer = new OpenLayers.Layer.Vector("Vectors", {
  styleMap: <your style map>,
  rendererOptions: { zIndexing: true }
});

另外，OpenLayers.Util.extend 只接受两个参数，第一个参数是目标（即第二个参数 source 会合并到其中）。如果要组合多个对象，可以使用jQuery.extend或者多次调用OpenLayers.Util.extend：

OpenLayers.Util.extend(this.startIconStyle, OpenLayers.Feature.Vector.style['default'] );
OpenLayers.Util.extend( this.startIconStyle, this.defaultStyles );

或

jQuery.extend( this.startIconStyle, OpenLayers.Feature.Vector.style['default'], this.defaultStyles );

这两者都会导致 this.startIconStyle 包含 this.startIconStyle、OpenLayers.Feature.Vector.style['default'] 和 this.defaultStyles 的联合。

你可能真正想要的是：

var newstyleSite = {};
jQuery.extend( newstyleSite,  OpenLayers.Feature.Vector.style['default'], this.defaultStyles, this.startIconStyle );

【讨论】：