Question

我了解到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”，而当我单击该功能时，会弹出带有相同信息的弹出窗口。

Answer 1

    .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;
        }
    });

Obi，悬停功能上的弹出窗口也有同样的问题。我使用了OpenLayers 5和Angular 6。

我设法通过创建一个<div>弹出元素并在叠加层中引用此元素来解决它。

将叠加层添加到地图对象，并在地图上定义pointermove事件。在pointermove事件中，我引用了地图并使用了forEachFeatureAtPixel方法。

悬停功能的基础层对我来说是ClusterSource，因此将多个点要素归为一个要素。

参考文献：

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

1 个答案: