Создание всплывающего окна и отображение данных - PullRequest
Новая
       5

Создание всплывающего окна и отображение данных

0 голосов
/ 27 марта 2020

Я перехожу из 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)?

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Вы можете посмотреть на 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

0 голосов
/ 27 марта 2020

Вы можете добавить свойства к конструктору в конструкторе (при условии, что данные доступны из вашего dataServices): 

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

, к которому затем можно получить доступ, используя feature.get('description') или feature.getProperties().description* 1007. *

Если вы используете взаимодействие Выбрать 

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