如何在鼠标悬停和单击时在 OpenLayers 5 中实现功能弹出窗口

我了解到 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>

我希望看到一个工具提示，当我将鼠标悬停在该功能上时，会显示该功能的一些属性，例如"名称"和"ID"，当我单击该功能时，会看到一个包含相同信息的弹出窗口。

    .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，因此多个点要素被分组在一个要素下。

引用：

https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#forEachFeatureAtPixel
https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
https://openlayers.org/en/latest/examples/overlay.html
https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html

相关内容

最新更新

热门标签：