OpenLayers：多层弹出问题

Question

我实际上遇到了一个到目前为止我无法解决的大问题。这是我的问题。实际上，我有一张地图，根据我想要显示或隐藏的某些类别，我在其上显示标记 (WMSGetFeatureInfo)。

但事情是这样的，我实际上将这些标记作为 *.map 文件获取，该文件实际上是一个包含所有标记的 PNG 文件。

当我点击一个标记时，我会得到点击的位置，然后添加一个弹出窗口。但是我在地图上显示的图层越多，弹出窗口就越远离相关标记。

这里有一些代码：

    var layer = new OpenLayers.Layer.WMS(
        category.label,
        "/mapserv?Map=" + category.url,
        {
            layers  : category.layer,
            format  : 'image/png',
            version : '1.3.0',
            srs     : 'ESPG:3163'
        },
        {
            isBaseLayer : false,
            singleTile  : true,
            visibility  : visibility,
        }
    );

    var info = new OpenLayers.Control.WMSGetFeatureInfo({
        title          : 'get details by clicking',
        layers         : [ layer ],
        infoFormat     : "text/plain",
        queryVisible   : true,
        eventListeners : {
            getfeatureinfo : function( event ){
                document.body.style.cursor = 'auto';

                var getId = function( text ) {
                    result = context.settings.pattern.exec( text );
                    if( result == null ) return;
                    return result[1];
                }

                var id = getId( event.text );

                request = jQuery.ajax({
                    url     : "/cartoweb/FicheTheme",
                    type    : "get",
                    data    : "idGeoEad="+id,
                    success : function(response, textStatus, jqXHR){
                        if (response == null || response['data'] == null) {
                            return;
                        }
                        context.generateAndShowPopup( event.xy, response['data']['metaData'] );
                    }
                });
            },
            beforegetfeatureinfo : function( event ){
                document.body.style.cursor = 'wait';
            },
            nogetfeatureinfo : function( event ){
                document.body.style.cursor = 'auto';
            }
        }
    });

    this.map.addControl( info );
    info.activate();


generateAndShowPopup : function( latlong, text ) {
    var lonlatfrompx = this.map.getLonLatFromViewPortPx( latlong );
    var anchor       = {
        'size'      : new OpenLayers.Size(0,0), 
        'offset'    : new OpenLayers.Pixel(-36, 6), 
        'keepInMap' : true
    };

    // Hide by default popup actually open
    if(this.popup !== undefined) {
        this.popup.hide();
    }

    // Create a new popup
    this.popup = new OpenLayers.Popup.Anchored(
        "chicken",
        lonlatfrompx,
        new OpenLayers.Size( 2000, 2000 ),
        '<div class="popupTail"></div><div class="popupContent">' + text + '</div>',
        anchor,
        false, 
        function(){}
    );

    // Popup settings
    this.popup.setBackgroundColor( 'transparent' );
    this.popup.panMapIfOutOfView         = true;
    this.popup.calculateRelativePosition = function () { return 'tr'; }

    // Add it on the map
    this.map.addPopup( this.popup );

    var that = this;
    setTimeout(function(){
        that.popup.updateSize();
    }, 50);

    this.map.setCenter( lonlatfrompx );
}

不确定我是否做错了什么，但如果有人已经遇到过同样的问题，那么知道我做错了什么会非常有帮助。

非常感谢

编辑
好的，所以我尝试在图层上重新投影 latlong，但它仍然无法正常工作。但是，我正在取得进展：

// Layer is the layer associated to each WMSGetFeatureInfo
// this.layer is the base layer used to display the map
lonlatfrompx.transform( layer.projection, this.layer.projection );
this.map.setCenter( lonlatfrompx );

编辑 1
好的，所以我正在取得进展。我想我知道问题出在哪里，但我仍然不知道/不知道我将如何解决它（还）。

当 intanciating info 变量时，我在里面进行了一个 ajax 调用，点击时会显示一个弹出窗口。问题是我添加的层越多，这个 ajax 请求就越试图获取信息。

假设我在地图上显示了 5 个不同的层（IT、设计、启动、计算机和桌面）。然后，当我单击标记 (WMSGetFeatureInfo) 时，它实际上会尝试创建一个 ajax request * [number of layers visible]，然后在某个点（有时）更改位置值。

为了解决这个问题，我需要避免多次执行这个 ajax 请求。有什么想法吗？

Answer 1

当我第一次阅读您的帖子时，我误解了您的“标记”为OpenLayers.Marker，我认为您最好还是将您的“标记”称为WMSGetFeatureInfo。读者更容易理解它:)

我个人认为您遇到的问题是由于您的地图投影，当您定义参数“lonlatfrompx”时，您的图层投影为“ESPG:3163”，您没有将 lon/lat (EPSG:4326) 重新投影为“ ESPG：3163”。所以弹出窗口的 lon/lat 是错误的...

更新

通过阅读您的“EDIT 1”，我注意到您编写“var info = new OpenLayers.Control.WMSGetFeatureInfo”函数的方式非常奇怪，为什么需要在 WMSGetFeatureInfo 中添加 ajax 调用？执行此操作的常用方法是使用“url”参数来查询 wms，而不是使用 ajax 调用。例如：

info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: 'http://demo.opengeo.org/geoserver/wms', 
        title: 'Identify features by clicking',
        queryVisible: true,
        layers: [layer],
        eventListeners: {
            getfeatureinfo: function(event) {
                // add popup here
                map.addPopup(new OpenLayers.Popup.FramedCloud(
                    "chicken", 
                    map.getLonLatFromPixel(event.xy),
                    null,
                    event.text,
                    null,
                    true
                ));
            },
            beforegetfeatureinfo: function(event) {
            ......
            },
            nogetfeatureinfo: function(event) {
            ......
            }
            ......
        }
    });

更新 2

第一：

是的，如果您包含多个源（层），WMSGetFeatureInfo 将向 WMS 服务器发送多个请求。这就是为什么你的 ajax 被多次调用的原因。

同一地图位置（鼠标点击点）上的所有图层是否具有相同的 id (idGeoEad)？如果他们这样做了，有一种快速而肮脏的方法，它只提供一层（而不是层数组）的“层”参数，那么 ajax 调用只会触发一次。或者只是不设置 layer & url 参数，它会自己找到第一个符合条件的图层。

第二个：

即使是这样，在我看来它也不应该影响您的弹出位置。因为“event.xy”和“lonlatfrompx”应该始终相同。所以我认为弹出窗口指向远离相关标记仍然是由错误的投影引起的。 所以请仔细检查您的地图投影、地图显示投影和所有图层的投影。另请检查您的地图文件设置上的所有图层投影是否正确？所有图层都使用“EPSG:3163”吗？ 在上面的代码中，我注意到一个错字“srs：'ESPG:3163'”，它应该是 EPSG:3163。

如果你使用fire-bug或者google developer tool，请debug或者console.log看看“event.xy”和“lonlatfrompx”是否每次都能得到正确的位置。