Question

在我的项目中，我将从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中创建Vector图层的方法：

    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

创建弹出窗口并显示数据

2 个答案: