OpenLayers : 다중 레이어 팝업 문제

Question

저는 실제로 지금까지 해결할 수없는 큰 문제가 있습니다. 여기 내 문제가있다. 실제로 표시하거나 숨기려는 일부 범주에 따라 마커 (WMSGetFeatureInfo)를 표시하는지도가 있습니다.

그러나 여기에 실제로 실제로 모든 마커가 포함 된 PNG 파일 인 * .map 파일로 해당 마커가 표시됩니다.

마커를 클릭하면 클릭 위치가 표시되고 팝업이 추가됩니다. 그러나지도에 표시되는 레이어가 많을수록 팝업이 관련 마커에서 멀리 떨어져 있습니다. 여기에 몇 가지 코드

:

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
좋아. 나는 문제가 어디서 왔는지 알고 있다고 생각하지만 아직도 어떻게 해결할 지 알지 못한다.

info 변수에 영향을 줄 때 클릭하면 팝업이 표시되는 아약스 호출이 생성됩니다. 이 레이어를 추가할수록 더 많은 정보를 얻으려고 애쓰하는 것입니다.

내가 5 개의 다른 레이어 (IT, 디자인, 시작, 컴퓨터 및 데스크톱)를 보여줍니다. 그런 다음 마커 (WMSGetFeatureInfo)를 클릭하면 실제적으로 아약스 request * [number of layers visible]을 만든 다음 위치 값 (때때로)을 변경하려고 시도합니다.

이 문제를 해결하려면이 Ajax 요청이 두 번 이상 실행되지 않도록해야합니다. 어떤 아이디어?

Answer 1

처음 게시물을 읽었을 때 나는 "마커"를 OpenLayers.Marker으로 오해하고 있습니다. 여전히 "마커"를 WMSGetFeatureInfo이라고 부르는 것이 좋습니다. 독자가 따라야하는 것이 더 쉽습니다.

개인적으로 내가 얻은 문제는지도 투영으로 인한 것입니다. 계층 투영은 "ESPG : 3163"이며 "lonlatfrompx"매개 변수를 정의하면 다시 투영되지 않았습니다. lon/lat (EPSG : 4326)에서 "ESPG : 3163"으로 변경되었습니다. 그래서 당신의 "EDIT 1"을 읽는 ...

업데이트

을 팝업에 대한 위도 잘못 경도 /됩니다 난 그냥 방법은 당신이 당신의 "VAR 정보 = 새로운 OpenLayers.Control 쓰기 것을 알 수 있습니다. WMSGetFeatureInfo "함수가 매우 이상합니다. 왜 WMSGetFeatureInfo 안에 ajax 호출을 추가해야합니까? 이를 수행하는 일반적인 방법은 "url"매개 변수를 사용하여 ajax 호출 대신 wms를 쿼리하는 것입니다.

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 서버에 여러 요청을 보냅니다. 그래서 아약스가 여러 번 호출되었습니다.

동일한지도 위치 (마우스 클릭 포인트)의 모든 레이어가 동일한 id (idGeoEad)를 가지고 있습니까? 레이어의 배열 대신에 "layers"매개 변수를 제공하는 빠르고 더러운 방법이 있다면 Ajax 호출은 한 번만 트리거합니다. 아니면 레이어 & url 매개 변수를 설정하지 않으면 첫 번째로 적합한 레이어 자체를 찾습니다.

둘째 :

그런 경우하더라도

, 내 생각에 그것은 당신의 팝업 위치에 영향을 미치지 않습니다. 왜냐하면 "event.xy"와 "lonlatfrompx"는 항상 같아야하기 때문입니다. 그래서 팝업이 관련 마커에서 멀리 떨어져 있다고 생각합니다. 여전히 잘못된 투영 때문입니다. 지도 투영,지도 표시 투영 및 모든 투사 투영을 다시 확인하십시오. 또한 맵 파일 설정에서 모든 레이어의 투영이 올바른지 확인하십시오. 모든 레이어에서 "EPSG : 3163"을 사용합니까? 위의 코드에서 오타가 "srs : 'ESPG : 3163'"인 경우 EPSG : 3163이어야합니다.

fire-bug 또는 Google 개발자 도구를 사용하는 경우 디버그 또는 console.log를 사용하여 "event.xy"및 "lonlatfrompx"가 매번 올바른 위치를 얻는 지 확인하십시오.