openlayers矢量特征z索引 [英] openlayers vector features z-indexing

问题描述

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

Im having hard time trying to understand the z-indexing of the vector features.

当我在网上搜索信息时，我发现了以下链接: 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

When i was searching the web for info i found these links: http://openlayers.org/dev/examples/ordering.html http://osgeo-org.1803224.n2.nabble.com/Bug-in-using-graphicZIndex-td2648665.html and http://osgeo-org.1803224.n2.nabble.com/graphicZIndex-of-vector-features-td3919627.html

我所做的就是设置样式，使其显示在第一个链接上:

What i did, was setting up styles like they are shown on first link:

 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"
        }

当我创建标记时，我会那样做:

And when i create markers, i do it like that:

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中.

And when i look at the z-index of that marker - z-index is set to auto not 745, which is in this.defaultStyles.

这将我们带到了第3个链接...我根本无法理解，这导致设置在其他任何地方的样式所提供的功能与我现在获得的功能一样多.

This brings us to 3rd link... which i cant understand at all, cause setting styles anywhere else gives exactly as much, as im getting right now.

也不

this.routePointFeature.attributes.zIndex = 745; 

完全更改任何内容.即使它显然适用于第一个链接/示例.

change anything at all. Even though it apparently works on that first link/example.

此z-indexing应该如何工作?为什么在我的情况下不起作用?我究竟做错了什么?还是那里有虫子?

How is this z-indexing supposed to work? And why doesnt it work in my case? What am i doing wrong? Or is something bugged there?

很多人已经查看了这个问题并提高了答案.但是我不得不处理其他事情，并且已经有一段时间没有与opelayers一起工作了.可以看到一些答案的人确认该答案有效，以便我接受吗?

Alot of people have viewed this question and upvoted the answer. Yet i have had to deal with other stuff and have not worked with opelayers for a while now. Can some people who have seen this answer confirm that the answer works so i can accept it?

艾伦

推荐答案

您必须为矢量层启用z-indexing.

You have to enable z-indexing for the vector layer.

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

此外，OpenLayers.Util.extend仅接受两个参数，第一个参数是目标(即，第二个参数source将组合到其中).如果要合并多个对象，则可以使用jQuery.extend或对OpenLayers.Util.extend的多次调用:

Additionally, OpenLayers.Util.extend only takes two parameters, and the first parameter is the destination (i.e., the second parameter, source, will be combined into it). If you want to combine multiple objects, you can use jQuery.extend or multiple calls to 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的并集.

Both of these will result in this.startIconStyle containing the union of this.startIconStyle, OpenLayers.Feature.Vector.style['default'], and this.defaultStyles.

您可能真正想要的是:

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

这篇关于openlayers矢量特征z索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！