单击没有特征的地图时隐藏弹出窗口

Question

我正在开发一个使用 openlayers 和 geoserver 显示弹出窗口的项目。我已经成功创建了显示弹出窗口的脚本。在那里，我使用 highcharts 库在弹出窗口覆盖内创建了一个图表。我在地图 [Geoserver 层] 中有许多可用的图例或标记。

当用户点击地图内的任何点时，我已经成功地生成了弹出窗口。我的问题是，当我点击不存在任何点的地图时，我得到一个空白的弹出窗口。

我试过设置点击时没有数据解析的条件，设置为popup.hide();。

// map variable
var map = new ol.Map({
    controls: ol.control.defaults({
        attributionOptions:  ({
            collapsible: false // Make the attribution non collapsible
        })
    }).extend([mousePositionControl]),
    target: 'map',
    view: view // Set view
});



/*
  * Add a click handler to the map to render the popup.
*/

/*Attribute popup*/
/*Display the Data in a popup box*/

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);


map.on('singleclick', function(evt) {


   popup.show(evt.coordinate,popup);    

});

Answer 1

你尝试了吗

reqwest({        
    url: urlIndia,
    type: 'json',
}).then(function (data) {
    if (data.features.length == 0) {
      popup.hide();
      return;
    }
    for (var i = 0; i < data.features.length; i++) 
    {

Answer 2

在你的点击事件中试试这个

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

                if (feature) { what you want to do }

看看这个link可能对你有帮助https://embed.plnkr.co/plunk/hhEAWk

单击没有特征的地图时隐藏弹出窗口

Hide popup when onclick of map where no features

javascript

php

geoserver

openlayers

highcharts