如何在 openlayers 中使用带有链接的弹出窗口

Question

我想显示带有标记的地图。当我点击一个标记时，我想显示一个弹出窗口。在弹出窗口中还应该有一个指向外部网站的 link。
到目前为止一切正常。
但是，当我单击第一个标记（-> 显示弹出窗口），然后直接单击第二个标记时，弹出窗口仅在第二个标记上显示不久，然后消失！
我认为这与弹出窗口的 "animation" 设置有关。但是当我设置 "animation: false" 时，我就不能再使用 link 了（我可以点击它们，但它们不会打开请求的网站）。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Popup</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="map" class="map"></div>
        <div id="popup"></div>

        <script>
            var place_0 = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([1.1, 50])),
                name: 'placename 1<br><a target="_blank" href="http://www.fairtragen.de">link1</a>'
            });

            var place_1 = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([1.2, 50])),
                name: 'placename 2<br><a target="_blank" href="http://www.fairtragen.de">link2</a>'
            });

            var vectorSource = new ol.source.Vector({
                features: [place_0, place_1]
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });

            var rasterLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            var map = new ol.Map({
                layers: [rasterLayer, vectorLayer],
                target: document.getElementById('map'),
                view: new ol.View({
                    center: ol.proj.fromLonLat([1.1, 50]),
                    zoom: 10
                })
            });


            var element = document.getElementById('popup');

            var popup = new ol.Overlay({
                element: element,
                stopEvent: false
            });
            map.addOverlay(popup);


            // display popup on click
            map.on('click', function (evt) {
                $(element).popover('destroy');

                var feature = map.forEachFeatureAtPixel(evt.pixel,
                        function (feature) {
                            return feature;
                        });

                if (feature) {
                    var iname = feature.get('name');
                    var coordinates = feature.getGeometry().getCoordinates();
                    popup.setPosition(coordinates);

                    $(element).popover({
                        'animation': true,
                        'html': true,
                        //'delay': 1000,
                        'content': iname
                    });
                    $(element).popover('show');
                } else {
                    $(element).popover('destroy');
                }
            });

        </script>
    </body>
</html>

Answer 1

问题是 click 事件适用于叠加层和地图。事件通过 Openlayers 遍历地图上的每个元素。您可以使用 Overlay 上的 stopEvent 选项来防止这种情况。

https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html

var popup = new ol.Overlay({
  element: element,
  stopEvent: true
});

如何在 openlayers 中使用带有链接的弹出窗口

How to use popover with links in openlayers

openlayers

twitter-bootstrap-3