强制OpenLayers Markers图层在顶部绘制,并在下面有可选择的图层

时间:2011-01-18 20:49:14

标签: javascript openlayers

我有一个OpenLayers地图,它按顺序包含栅格基础层,矢量图层和标记图层。它们以正确的顺序显示,矢量上方的标记非常好。

但是当我添加一个SelectFeature控件并将其指向矢量图层时,它会突然在标记图层上方绘制,尽管所有努力都需要提升标记图层或设置Z索引。似乎SelectFeature控件会覆盖所有绘图顺序设置。这是设计,还是我能以某种方式克服这个?

图层定义:

var baselayer = new OpenLayers.Layer.WMS('Norden', 
'http://{myarcgisserver}/ArcGIS/services/mylayer/MapServer/WMSServer', {
    layers :'1,2',
    transparent :false,
    width :'auto',
    height :'auto',
    filter :null
}, {
    isBaseLayer: true,
    singleTile :true,
    ratio :1,
    alpha :false,
    transitionEffect :'resize'
});

var vectorLayer = new OpenLayers.Layer.Vector("Work orders", {
    projection: new OpenLayers.Projection("EPSG:2400"),
    strategies: [new OpenLayers.Strategy.Fixed(), refresh],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "/WorkOrder/WorkOrders.ashx?output=geojson",
        format: new OpenLayers.Format.GeoJSON()
    })
});

var markerlayer = new OpenLayers.Layer.Markers("Markers", {
    projection: new OpenLayers.Projection("EPSG:2400"),
    displayInLayerSwitcher: false
}
);

控制定义:

var selectctrl = new OpenLayers.Control.SelectFeature(
    vectorLayer,
    {
        clickout: true,
        toggle: false,
        multiple: false,
        hover: false,
        toggleKey: "ctrlKey", // ctrl key removes from selection
        multipleKey: "shiftKey", // shift key adds to selection
        box: false
    }
);

激活:(如果没有这个,图层按正确的顺序绘制)

map.addControl(selectctrl);

selectctrl.activate();

编辑: 在OpenLayers.Handler.Feature中找到了这个,其中“moveLayerToTop”感觉就像罪魁祸首......会试图克服它,但如果有人知道这是不可能的,请告诉我!

/**
 * Method: activate 
 * Turn on the handler.  Returns false if the handler was already active.
 *
 * Returns:
 * {Boolean}
 */
activate: function() {
    var activated = false;
    if(OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
        this.moveLayerToTop();
        this.map.events.on({
            "removelayer": this.handleMapEvents,
            "changelayer": this.handleMapEvents,
            scope: this
        });
        activated = true;
    }
    return activated;
},

2 个答案:

答案 0 :(得分:7)

答案 - 如果可以调用它,那就在我上面提到的激活功能中。我试图覆盖它并删除了对moveLayerToTop的调用,它就像一个魅力。

修改: 我最终将此代码添加到OL代码库之外的js文件中,覆盖处理程序激活功能。这是因为否则我将失去对OpenLayers代码库更新的更改。

OpenLayers.Handler.Feature.prototype.activate = function() {
    var activated = false;
    if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
        //this.moveLayerToTop();
        this.map.events.on({
            "removelayer": this.handleMapEvents,
            "changelayer": this.handleMapEvents,
            scope: this
        });
        activated = true;
    }
    return activated;
};

答案 1 :(得分:2)

当我遇到同样的问题时,我发现了这一点,试图让多个图层对鼠标事件作出反应。

解决方案,以防其他人发现此线程更简单。

SelectFeature控件采用Vector图层数组,如果你需要对鼠标事件(悬停和点击)作出反应的所有内容都在该数组中,那么它们都可以工作,而不仅仅是移动到顶部的那个。 / p>

文档建议完全不使用标记图层。虽然我的解决方案围绕PostGIS几何字段并且适合在矢量图层中渲染POINT数据,但任何使用Markers的东西都可以这样做,而且根据OpenLayers,应该这样做。

因此,使用矢量图层标记并执行以下操作可以大大简化此线程的已批准解决方案:

this.carSelect = new OpenLayers.Control.SelectFeature(
    [vectorsLayer, markersLayer],
    {
        'hover':true,
        'callbacks': {
            blah blah blah
    }
});

这将在两个图层上注册相应的事件并使它们都存在。

我希望这有助于其他任何人在这个问题上遇到麻烦。

正如其他地方所说,使用OpenLayers并不难,找到正确处理它的方法是。