Openlayers 텍스트 레이어를 사용하여 팝업을 편집하는 방법

Question

Openlayers를 사용하여 약 1000 점 이상의지도를 만듭니다. 현재 한 점의 아이콘을 클릭하면 점에 대한 설명이 팝업으로 표시되고 팝업을 종료하려면 다시 같은 점의 아이콘을 클릭해야합니다. 닫기 버튼을 누르거나지도의 아무 곳이나 클릭하여이 팝업이 다시 닫힐 수 있도록 코드를 수정하는 방법이 있습니까? 나는 그냥 일반 팝업을 사용하고 있지만 Openlayers.layer.text 레이어를 사용하고있는 경우 방법이 있다는 것을 알고 있습니다.

이 코드를 사용하여 텍스트 레이어를 추가합니다. 텍스트 파일에는 다음 열이 있습니다. lon lat title description icon iconSize iconOffset. 팝업에 추가해야하는 다른 열이 있습니까? 팝업 크기를 수정해야하는 열을 시도했지만 나에게 효과가 없습니다. 그래서, 지금까지 나는 그 안에 무엇이 있는지를 제외하고는 팝업을 수정할 수 없었습니다.

Answer 1

팝업에 대한 생성자 호출에서 닫기 상자가 있어야 함을 지정할 수 있습니다.

OpenLayers 문서에서

: http://dev.openlayers.org/apidocs/files/OpenLayers/Popup-js.html

Parameters 
... 
closeBox {Boolean} Whether to display a close box inside the popup. 
closeBoxCallback {Function} Function to be called on closeBox click. 

을하고 팝업을 표시 레이어 이벤트 featureselected를 사용하는 경우, 당신은 팝업을 닫습니다 featureunselected 이벤트를 사용할 수 있습니다.

Answer 2

컨트롤이있는지도를 새로 고치는 경우 여러 컨트롤과 이벤트 처리기가 없도록주의하십시오 (이 게시물 마지막 부분의 마지막 참고 참조).

두 개의 별개 이벤트로 팝업을 닫을 수 있습니다. 팝업 안에 CLOSE ('X') 상자가 나타나고 팝업에서 포커스를 잃을 때 팝업을 닫는 자동 프로 시저가 있습니다.

이 의사 코드는 사용자가 아무 MARKER (마커)를 클릭 할 때 나타나는 팝업 창이있는 기능 맵에서 가져 왔습니다.

var urlKML = 'parseKMLTrack07d.php';   
var layerKML = new OpenLayers.Layer.Vector("KML1", { 
      strategies: [new OpenLayers.Strategy.Fixed()], 
      protocol: new OpenLayers.Protocol.HTTP({ 
       url: urlKML, 
       format: new OpenLayers.Format.KML({ 
        extractStyles: true, 
        extractAttributes: true, 
        maxDepth: 2 
       }) 
      }) 
     }); 

후 난 'selectStop'호출 선택 제어를 만들고 난 2 개 기능 연관 :

난 (PHP 파싱 동적 KML 파일에서이 경우에는)지도 상에 층을 만들고 (마커 선택 및 비 선택시) 이벤트 :

var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); 
layerKML.events.on({ 
      "featureselected": onFeatureSelect, 
      "featureunselected": onFeatureUnselect 
     }); 
map.addControl(selectStop); 
selectStop.activate(); 

이들 두 마커가 선택된 경우에 기능이나 UNSELECTED

function onFeatureSelect(event) { 
    var feature = event.feature; 
    var content = feature.attributes.name + '<br/>'+feature.attributes.description; 
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
          feature.geometry.getBounds().getCenterLonLat(), 
          new OpenLayers.Size(100,100), 
          content, 
          null, true, onFeatureUnselect); 
    feature.popup = popup; 
    map.addPopup(popup); 
    // GLOBAL variable, in case popup is destroyed by clicking CLOSE box 
    lastfeature = feature; 
} 
function onFeatureUnselect(event) { 
    var feature = lastfeature; 
    if(feature.popup) { 
     map.removePopup(feature.popup); 
     feature.popup.destroy(); 
     delete feature.popup; 
    } 
} 

있다

onFeatureSelect 함수에서 'lastfeature'라는 GLOBAL 변수를 만듭니다. 내가 이렇게하는 이유는 내 onFeatureUnselect가 팝업이 파손되지 않거나 CLOSE BOX가 클릭되었을 때 팝업을 없애기 위해서입니다.

내가 전역 변수로 기능을 저장하지 않은 경우 개별적인 원인이되는 이벤트가 다르기 때문에 선택 취소 및 닫기 상자를 별도로 클릭해야합니다.

팝업 내부 CLOSE BOX를 만들 난으로합니다 (onFeatureSelect 함수 팝업 선언) 마지막 인수 번째 세트 onFeatureUnselect TRUE 이름 닫기 상자 콜백 함수 :

popup = new OpenLayers.Popup.FramedCloud("chicken", 
         feature.geometry.getBounds().getCenterLonLat(), 
         new OpenLayers.Size(100,100), 
         content, 
         null, true, onFeatureUnselect); 

마지막 참고 : 레이어에서 새로 고침을 사용하는 경우 핸들러를 복제하지 않도록주의하십시오. 이 경우 자바 스크립트가 시작되면 selectStop 컨트롤 ID를 포함 할 변수 'id1'을 만듭니다. 새 컨트롤 및 처리기를 만들기 전에 해당 컨트롤이 있는지 확인하십시오. 예 :

onFeatureSelect에 경고를 입력하여 이벤트 처리기를 복제하고 있는지 확인할 수 있습니다. 마커를 클릭하고 여러 개의 경고 창을 표시하면 중복 처리기가 생깁니다. 당신은 팝업을 파괴 할 수 없다는 인상을 받는다. 그것은 진실이 아니다. 당신은 하나의 팝업을 파괴했지만 N 개의 똑같은 팝업을 가지고있다.