时间戳

首页 > 解决方案 > 创建弹出窗口并显示数据

javascript - 创建弹出窗口并显示数据

问题描述

我正在我的项目中从 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 中实现功能弹出窗口）？

标签： javascriptgisopenlayers

解决方案

您可以在构造函数中向功能添加属性（假设数据可从您的 中获得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');
  }
});

推荐阅读