Openlayers 2. z轴和选择控件答案

【问题标题】：Openlayers 2. z-axis and select controlOpenlayers 2. z轴和选择控件
【发布时间】：2018-06-21 01:43:21
【问题描述】：

我有几个矢量图层，一个有多边形，一个有线条。我们需要将线添加到附加到多边形的线层（数据库过程需要多边形 ID，这些 ID 存储在多边形的属性中）

所以我在lineLayer 上有一个drawFeature 控件，在polygonLayer 上有一个selectFeature（在悬停时存储ID 而不仅仅是选择）。它实际上工作得很好，除了添加时 linelayer 的 z 轴较低，因此它显示了在多边形下绘制的新线。宁愿让线条显示在多边形上。我知道这是因为当 selectFeature 控件处于活动状态时，它会将多边形图层的 z-index 设置为高于 lineLayer。我使用 lineLayer.setZIndex(800) 或其他方法手动将 linelayer 的 z-index 设置为高于多边形层，这肯定会使新线在多边形上绘制，但随后 selectFeature 事件不会触发。我考虑了几种解决方案，包括将 drawFeature 添加到我的多边形图层，然后在完成后将要素移动到线图层，但它仍在多边形下渲染，我什至在我的样式图的“临时”样式上使用了 graphicsZIndex多边形层。无济于事（我确实在多边形层上将 renderOptions zindexing 设置为 true）

我可能从错误的角度来处理这个问题，所以我愿意接受建议。如果矢量图层上有一个可用的函数，例如 getFeatureByPosition(position)，我可以在 sketchStarted 和 sketchEnded 事件上获取位置并查询它，但到目前为止我还没有找到类似的东西。

我现在不在我的开发盒上，以防有人想知道为什么没有代码。想在工作中发布此内容，但基础网络在显示登录页面时出现问题（我认为是 ssl）

【问题讨论】：

标签： javascript z-index openlayers

【解决方案1】：

所以我的解决方案需要做一些事情。首先，我需要从 OL 2.10 升级到最新的 2.13.1。这主要是由于需要添加到 2.11（我认为或者可能是 2.12）的新事件，该事件是“featureover”，可以在地图级别捕获，因此会在所有图层上触发，所以我不反对选择的 Z 索引。我从多边形图层中删除了选择控件，因为它不需要。

var featureOverHandler = function(event){
    if (event.feature.layer.id == polygonLayer.id) {
        selectedPolygonId = event.feature.attributes.POLYGON_ID;
        console.log("Selected Polygon Id: " + selectedPolygonId);
        map.events.unregister('featureover',map,featureOverHandler);
        map.events.register('featureout',map,featureOutHandler);
    }
};
var featureOutHandler = function (event) {
    if (event.feature.layer.id == polygonLayer.id) {
        selectedPolygonId = 0;
        console.log("Cleared Selected Polygon ID ");
        map.events.unregister('featureout', map, featureOutHandler);
        map.events.register('featureover', map, featureOverHandler);
    }
};

这些将捕获当前悬停的多边形。但随后我添加了事件来捕捉线路的开始和结束位置。从 2.11 开始，他们改变了“sketchstarted”事件的工作方式，您不能再使用它来捕获添加第一个点时指针所在的多边形。我在矢量图层上使用了点回调。

var vDrawOptions = {
    callbacks: {
        "point": function (p) {
            if (p.parent.components.length == 2) {
                console.log("First Point added");
                startingPolygonId = selectedPolygonId;
            }
        }
    }
}
vectorAddControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Path,vDrawOptions);

然而，“skecthcomplete”仍然可以用来捕捉终点（以及多边形）

function vSketchComplete(evt) {
    endingPolygonId = selectedPolygonId;
};
vectorLayer.events.register('sketchcomplete', vectorLayer, vSketchComplete);

希望这可以帮助其他处于类似情况的人。

【讨论】：