OpenLayers에서 벡터에 팝업 상자를 추가하는 방법은 무엇입니까?

Question

내 프로그램의 이전 버전에서는 markers을 사용하여지도상의 점수를 표시했습니다. 현재 버전에서 나는 여분의 유연성이 필요하기 때문에 markers에서 vectors으로 변경해야했습니다.

function createPopupBoxFeature(vector, lonLat, description) { 
    var feature = new OpenLayers.Feature(vector, lonLat); 

    feature.closeBox = true; 
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, 
     { "autoSize": true }); 
    feature.data.popupContentHTML = description; 

    vector.events.register("mousedown", feature, function(evt) { 
     if (this.popup == null) { 
      this.popup = this.createPopup(this.closeBox); 
      map.addPopup(this.popup); 
      this.popup.show(); 
     } else { 
      this.popup.toggle(); 
     } 
     OpenLayers.Event.stop(evt); 
    }); 

    return feature; 
} 

을하지만 그들은 더 events 속성이 없기 때문에 더 이상, vectors 위해 노력하고 있습니다 : 마커 솔루션에서 나는 마커에 팝업 상자를 추가 아래의 기능을 사용하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

독자적으로 해결되었습니다.

// Used to display the dialog popup 
var selectControl; 
var selectedFeature; 

가 SelectFeature에게

selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, 
    { 
     onSelect: onFeatureSelect, 
     onUnselect: onFeatureUnselect 
    }); 
    map.addControl(selectControl); 
    selectControl.activate(); 

이벤트 핸들러

function onPopupClose(evt) { 
    selectControl.unselect(selectedFeature); 
} 
function onPopupFeatureSelect(feature) { 
    selectedFeature = feature; 
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
     feature.geometry.getBounds().getCenterLonLat(), 
     null, feature.name, null, true, onPopupClose); 
    popup.panMapIfOutOfView = true; 
    popup.autoSize = true; 
    feature.popup = popup; 
    map.addPopup(popup); 
} 
function onPopupFeatureUnselect(feature) { 
    map.removePopup(feature.popup); 
    feature.popup.destroy(); 
    feature.popup = null; 
} 

스토어 벡터의 이름으로 팝업의 내용

추가 방법은 다음과 같습니다이다. 더 나은 해결책이 있을지 모르지만 나는 상관하지 않습니다. 벡터에 팝업을 추가하는 것은 이미 어렵습니다.

vector.name = "Your popup content"; 

Answer 2

사실 그 일의 공식 방법은 다음과 같다 :

(참고 : 일부 변수는이 조각에 선언되지 않은 : longt, 위도,지도)

http://dev.openlayers.org/examples/light-basic.html

//Step 1 - create the vector layer 
var vectorLayer = new OpenLayers.Layer.Vector("ExampleLayer",{ 
    eventListeners:{ 
     'featureselected':function(evt){ 
      var feature = evt.feature; 
      var popup = new OpenLayers.Popup.FramedCloud("popup", 
       OpenLayers.LonLat.fromString(feature.geometry.toShortString()), 
       null, 
       feature.attributes.message+"<br>"+feature.attributes.location, 
       null, 
       true, 
       null 
      ); 
      popup.autoSize = true; 
      popup.maxSize = new OpenLayers.Size(400,800); 
      popup.fixedRelativePosition = true; 
      feature.popup = popup; 
      map.addPopup(popup); 
     }, 
     'featureunselected':function(evt){ 
      var feature = evt.feature; 
      map.removePopup(feature.popup); 
      feature.popup.destroy(); 
      feature.popup = null; 
     } 
    } 
}); 

//Step 2 - add feature to layer 
var p = new OpenLayers.Geometry.Point(longt, lat); 
var feature = new OpenLayers.Feature.Vector(
    p.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 
    {message:'foo', location:'bar'}, 
    {externalGraphic: '../img/marker.png', graphicHeight: 21, graphicWidth: 16} 
); 
vectorLayer.addFeatures(feature); 

//Step 3 - create the selectFeature control 
var selector = new OpenLayers.Control.SelectFeature(vectorLayer,{ 
    hover:true, 
    autoActivate:true 
}); 

//Step 4 - add the layer and control to the map 
map.addControl(selector); 
map.addLayer(vectorLayer);