[英]How to add a popup box to a vector in OpenLayers?
在我的程序的先前版本中,我使用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;
}
但它不再適用於vectors
,因為它們沒有events
屬性。 我該如何解決?
實際上,官方的做法如下:
(注意:某些變量尚未在這些片段中聲明:longt,lat,map)
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);
由我自己解決。 方法如下:
// 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";
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.