创建弹出 window 并显示数据

Question

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

代码如下：

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 中实现功能弹出窗口）？

Answer 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');
  }
});

Answer 2

你可以看看ol-ext FeaturePopup。
参见示例：https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html
或者https://viglino.github.io/ol-ext/examples/popup/map.popup.html

创建弹出 window 并显示数据

Creating popup window and displaying data

javascript

gis

openlayers