【问题标题】:Openlayers 4: Changing the draw order of selected featuresOpenlayers 4:更改所选要素的绘制顺序
【发布时间】:2017-10-12 12:33:23
【问题描述】:

我在 OpenLayers 4 (4.4.1) 中有一个矢量图层。该层具有LineString 几何形状的几个特征。一些功能重叠。

如果我单击要素重叠的点,我只想将其中一个要素绘制为选中状态。其他的应该仍然可供稍后选择(通过单独的 UI 选择列表中的功能 ID)。

如果我单击另一个特征 id(在单独的 UI 选择列表中),则该特征应该被绘制为选中状态,并且先前选择的不应被绘制为选中状态,但在选择列表中仍然可用。

这可行,但它只是似乎在顶部绘制的第一个(默认)选定特征。

下图显示了功能 ID 10049 被标记为选中时的情况。

下图显示了功能 id 10048 被标记为选中时的情况。

如果我在最南端的某个地方点击它们不重叠的地方,它会被正确地绘制为顶部的选择。

为了跟踪需要在视觉上选择的特征,有一个变量:

var multiselectPrimaryId = 0;

我使用以下 selectInteraction 代码:

selectInteraction.on('select', function (e) {
    e.deselected.forEach(function (feature) {
        feature.setStyle(null);
    });
    if (e.selected.length <= 1) {
        $("#multipleHitWindow").hide();
        multiselectPrimaryId = 0;
        if (e.selected.length == 0) {
            return;
        }
    }
    var features = e.selected;
    if (multiselectPrimaryId == 0) {
        multiselectPrimaryId = features[0].getId();
    }
    if (features.length > 1) {
        var text = "Multiple hits: ";
        features.forEach(function (elem, index, array) {
            text += "<a href='javascript:changeSelectedFeature("
                 + elem.getId() + ")'>" + elem.getId() + "</a>  &nbsp;";
            if (elem.getId() == multiselectPrimaryId) {
                elem.setStyle(selectedStyleFunction);
            }
        });
        $('#multipleHit').html(text);
        $("#multipleHitWindow").show();
    }
    else {
        features[0].setStyle(selectedStyleFunction);
    }
});

我从一个动态创建的链接列表中调用这个函数:

function changeSelectedFeature(id) {
    multiselectPrimaryId = id;
    var featuresArray = selectInteraction.getFeatures().getArray().slice(0);
    var event = new ol.interaction.Select.Event()
    event.deselected = featuresArray;
    event.selected = featuresArray;
    event.type = 'select';
    event.target = selectInteraction;
    event.mapBrowserEvent = map.mapBrowserEventHandler_;
    selectInteraction.dispatchEvent(event);
}

如何让 selectedStyle 设置在顶部绘制?我试图将 zIndex 添加到 selectedStyle。不过好像没什么效果。

这是一个 JsFiddle:https://jsfiddle.net/5j6c6mgo/7/。选择还有其他一些小问题,但希望您能够看到我在上面描述的行为。

【问题讨论】:

  • 你能搞定当前的状态吗?
  • 通过选择交互,您不需要手动更新特征样式。您应该能够通过使用var features = selectInteraction.getFeatures() 抓取特征集合,清除features 集合,然后将新的选定特征添加到features 来更新交互的选定特征集。
  • @artgb:我会尽快让小提琴运行起来。现在它使用非公开数据,所以我需要做一些改变。
  • @Wyatt:也许我以错误的方式使用了选择交互。但我想要的是在点击时获得所有功能,但只显示其中一个为选中状态。在后面的步骤中,我希望能够一次一个地循环选择其他功能。另一种解决方案(也许是正确的解决方案?)是绘制一个单独的层并自己跟踪这一点,但如果选择交互可以提供帮助,那就太好了。

标签: javascript vector openlayers


【解决方案1】:

我有一个向量层...该层具有 LineString 几何形状的几个特征。某些 功能重叠。

我认为您需要 LineString 几何图形位于单独的图层中才能使用“zIndex” - 您可以通过在相关图层上调用“setZIndex”来执行此操作。这将很容易让你set the draw order at runtime

除了矢量将以其初始绘制顺序显示并且不重绘更改其绘制顺序之外是不可能的。

【讨论】:

  • 如果我在不重叠的点选择第二个 LineString,即使有重叠,第二个 LineString 也会被标记为在顶部选中。在这种情况下,似乎绘制顺序发生了某种变化。
  • 嗯 - 很有趣 - 虽然我仍然很确定任何公开可用的方法都无法实现这种行为。实际上会玩这个,看看你描述的情况会发生什么。你有 jsfiddle 之类的吗?
  • 添加了一个 Jsfiddle
  • 好的,有趣。我在 Windows 8.1 和 10 上同时使用 IE11 和 Chrome,它们的行为都与上图类似,即即使选择了最南端,最北端的功能也在顶部(通过单击“10048”链接)。
  • 您能否从 JSFiddle 添加一个屏幕截图,您首先通过单击中间部分选择了两个链接,然后单击现在可见的“多次点击:10048”-链接。恐怕我的问题不够清楚。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-02
  • 1970-01-01
  • 2010-11-04
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
相关资源
最近更新 更多