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

不知道如果我做錯了什麼，但如果有人已經面臨着同樣的問題，那將是非常有益的知道我做錯了什麼。

非常感謝

編輯
好了，所以我試圖重新投影層上的經緯度，但它仍然沒有工作。不過，我在進步：

// 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」，你沒有reproject lon/lat（EPSG：4326）改爲「ESPG：3163」。因此，這將是錯誤的經度/緯度爲彈出...

更新

通過閱讀你的「編輯1」我只是注意到這樣你寫你的「VAR信息=新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調用只會觸發一次。或者只是不設置圖層& url參數，它會自己找到第一個符合條件的圖層。

二：

即使是這樣的話，在我看來，應該不會影響您的彈出位置。因爲「event.xy」和「lonlatfrompx」應該始終相同。所以我認爲彈出窗口指向遠離相關標記仍然是由錯誤的投影引起的。 所以請仔細檢查你的地圖投影，地圖顯示投影和所有圖層的投影。還請檢查您的地圖文件中的所有圖層投影設置是否正確？所有圖層是否都使用「EPSG：3163」？ 在上面的代碼中，我注意到一個錯字「srs：'ESPG：3163'」，它應該是EPSG：3163。

如果您使用fire-bug或google開發者工具，請調試或console.log查看「event.xy」和「lonlatfrompx」是否每次都會獲得正確的位置。