创建弹出窗口并显示数据答案

【问题标题】：Creating popup window and displaying data创建弹出窗口并显示数据
【发布时间】：2020-03-27 05:54:46
【问题描述】：

我在我的项目中从 OpenLayers 2 迁移到 OpenLayers 6。在 OpenLayers 2 项目中，当我单击矢量图层我在弹出窗口中得到了特征的描述。

代码如下：

function createVectorLayer(layer) {
    var l = new OpenLayers.Layer.Vector(
        layer.Title,
        {
        eventListeners: {
            'featureselected': function (evt) {
                var f = evt.feature;
                var popup = new OpenLayers.Popup.FramedCloud("popup",
                    //OpenLayers.LonLat.fromString(f.geometry.toShortString()),// Michael commented 25/02/2018
                    OpenLayers.LonLat.fromString(f.geometry.getCentroid().toShortString()),
                    null,
                    "<div style='font-size:.8em'>" + f.attributes.Description + "<br/><a href='#picturedFeatureEditor' class='ui-btn ui-mini' id='featureEditButton'>עדכון</a></div>",
                    null,
                    true
                );

                f.popup = popup;

                map.addPopup(popup);

                $("#featureEditButton").click(function () {
                    editableFeature = f.attributes;
                    editableFeatureObject = f;
                    initFeatureEditor();
                    //$.mobile.changePage("#picturedFeatureEditor");
                });
            },
            'featureunselected': function (evt) {
                var feature = evt.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        },
        }
    );

    return l;
}

这是我在 OpenLayers 6 中创建矢量图层的方法：

    function createVectorLayer(layer) {
    var source = new ol.source.Vector({
        loader: dataServices.getFeatures(layer.Id,
            function (response) {
                if (!response) return;
                var features = [];
                $(response).each(function (i, j) {
                    let shapeObject = getShapeObject(j);
                    let feature = new ol.Feature({ 'geometry': shapeObject });
                    features.push(feature);
                });
                source.addFeatures(features);
            },
            function (jqXhr, textStatus, errorMessag) {
                console.log(errorMessag);
            })
    });

    return new ol.layer.Vector({
        source: source,
        style: createStyle(source)
    });
}

我知道我可以使用 Overlay 和 ol.interaction.Select 创建一个弹出窗口单击该功能时会触发该功能，但是我不知道单击该功能以在弹出窗口中显示它时如何访问功能描述。

我的问题是如何使用 OpenLayers 6 实现相同的行为（即如何在 6 中实现功能弹出窗口）？

【问题讨论】：

我会监听 'singleclick' 事件，然后使用方法 'forEachFeatureAtPixel' 来整理您想要的功能，如果满足任何条件，则继续添加叠加层。 openlayers.org/en/latest/apidoc/…openlayers.org/en/latest/apidoc/…
@Koronag 感谢发帖 ol.interaction.Select 和 forEachFeatureAtPixel 有什么区别？
选择交互是添加到地图的交互。 forEachFeatureAtPixel 只是一种检查提供的像素是否有任何特征的方法。聆听地图上的单击事件，您可以从返回的事件中提取当前像素（例如 evt.pixel，如果我记错了），然后使用 forEachFeatureAtPixel 检查给定像素是否有任何特征。如果有，您可以添加覆盖弹出窗口。

标签： javascript gis openlayers

【解决方案1】：

您可以在构造函数中为功能添加属性（假设数据可从您的dataServices 获得）：

                let feature = new ol.Feature({
                    geometry: shapeObject,
                    description: ....
                });

然后可以使用feature.get('description') 或feature.getProperties().description 进行访问

如果您使用的是 Select 交互

select.on('select', function(event) {
  if (event.selected.length > 0) {
    var feature = event.selected[0];
    var description = feature.get('description');
  }
});

【讨论】：

迈克，感谢您的帖子。如果我使用 ol.interaction.Select 和 on('select', function()) 如何访问“描述”属性。或者我应该使用“singleclick”事件，然后使用 Koronag 评论的方法“forEachFeatureAtPixel”？