Как реализовать всплывающие окна функций в OpenLayers 5 при наведении мыши и клике - PullRequest
Новая
       36

Как реализовать всплывающие окна функций в OpenLayers 5 при наведении мыши и клике

0 голосов
/ 18 апреля 2019

Я узнал, что OpenLayer 2 имеет элемент управления OpenLayer.control.featurepopup, который позволяет добавлять всплывающие окна, которые отображаются при наведении курсора на элемент на карте и при нажатии на элемент.Я ищу способ сделать это с OpenLayer 5 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing Popups</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 700px;
        }
    </style>

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
Popop!!!!
<div id="map"></div>

<script>
    var style,feature, map,vLayer,vSource,fpControl;
    $(document).ready(function () {
        style = [
            new ol.style.Style({
                image: new ol.style.Icon(({
                    scale: .7, opacity: 1,
                    rotateWithView: false, anchor: [0.5, 1],
                    anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                    src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
                })),
                zIndex: 5
            })
        ];

        feature = new ol.Feature({
            geometry: new ol.geom.Point(new ol.proj.fromLonLat([-0.890000,51.57889])),
            name: 'My Bus'
        });
        feature.setId(1007);
        feature.setStyle(style);

        // Create map
        vSource = new ol.source.Vector();
        vLayer = new ol.layer.Vector({
            source : vSource
        });
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vLayer
            ],
            view: new ol.View({
                center: new ol.proj.fromLonLat([-0.890000,51.57889]),
                zoom: 12,
                numZoomLevels: 18,
                maxResolution: 156543.0339,
            })
        });

        vSource.addFeature(feature);

        fpControl = new ol.Control.FeaturePopups({
            boxSelectionOptions: {},
            layers: [
               [
                    // Uses: Internationalized templates.
                    vLayer, {
                        templates: {
                            hover: '${.name}',
                            single: '${i18n("Name")}: ${.name}<br>',
                            item: '<li><a href="#" ${showPopup()}>${.name}</a></li>'
                        }
                    }
                ]
            ]
        });
        map.addControl(fpControl);
    });
</script>
</body>
</html>

Я ожидаю увидеть всплывающую подсказку, показывающую некоторые свойства вне функции, такие как 'name' и 'id', когда я наведу курсор на эту функцию.и всплывающее окно с той же информацией, когда я нажимаю на функцию.

1 Ответ

0 голосов
/ 25 июня 2019 
    .popup {
        border-radius: 5px;
        border: 1px solid grey;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 2px;
    }

    <div id="map"></div>
    <div #popup class="popup" [hidden]="true"></div>

    this.popupOverlay = new Overlay({
        element: this.popup.nativeElement,
        offset: [9, 9]
    });
    this.map.addOverlay(this.popupOverlay);

    this.map.on('pointermove', (event) => {
        let features = [];
        this.map.forEachFeatureAtPixel(event.pixel,
            (feature, layer) => {
                features = feature.get('features');
                const valuesToShow = [];
                if (features && features.length > 0) {
                    features.forEach( clusterFeature => {
                        valuesToShow.push(clusterFeature.get('VALUE_TO_SHOW'));
                    });
                    this.popup.nativeElement.innerHTML = valuesToShow.join(', ');
                    this.popup.nativeElement.hidden = false;
                    this.popupOverlay.setPosition(event.coordinate);
                }
            },
            { layerFilter: (layer) => {
                return (layer.type === new VectorLayer().type) ? true : false;
            }, hitTolerance: 6 }
        );
        if (!features || features.length === 0) {
            this.popup.nativeElement.innerHTML = '';
            this.popup.nativeElement.hidden = true;
        }
    });

Оби, у меня была такая же проблема для всплывающего окна при наведении курсора. Я использовал OpenLayers 5 и Angular 6.

И мне удалось решить эту проблему путем создания всплывающего элемента <div> и ссылки на этот элемент в оверлее.

Добавлено наложение на объект карты и определение события pointermove на карте. В событии pointermove я ссылаюсь на карту и использую метод forEachFeatureAtPixel.

Базовый слой для функции при наведении был для меня ClusterSource, поэтому несколько точечных объектов были сгруппированы под одним объектом.

Ссылки:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...