听起来很简单，但我找不到任何新手教程：谁能给我一个简单的例子，我如何在 OpenLayers 中创建（vektor）标记，在鼠标悬停时打开一个信息窗口，甚至在鼠标悬停时关闭它？
我发现这部分解释但不是全部....
问问题
40977 次
8 回答
18
对于如何执行此操作的简单示例，您需要做几件事：
创建一个矢量图层以包含您的标记并将其添加到地图中：
this.markerLayer = new OpenLayers.Layer.Vector(
"My Marker Layer",
{ /* configuration options are set here */ }
);
map.addLayer(this.markerLayer);
创建您的标记并将其添加到地图中：
var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);
this.markerLayer.addFeatures([marker]);
为您的图层创建一个选择控件，并注册一个函数以在用户将鼠标悬停在您的标记上时构建您的弹出窗口：
var selectControl = new OpenLayers.Control.SelectFeature(this.markerLayer, {
hover: true
});
selectControl.events.register('featurehighlighted', null, onFeatureHighlighted);
构建您的弹出窗口：
onFeatureHighlighted: function (evt) {
// Needed only for interaction, not for the display.
var onPopupClose = function (evt) {
// 'this' is the popup.
var feature = this.feature;
if (feature.layer) {
selectControl.unselect(feature);
}
this.destroy();
}
feature = evt.feature;
popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"<h2>"+feature.attributes.station_na + "</h2>" +
"Location: " + feature.attributes.location + '<br/>' +
"Elevation: " + feature.attributes.elev_,
null, true, onPopupClose);
feature.popup = popup;
popup.feature = feature;
map.addPopup(popup, true);
}, // ...
于 2012-06-18T20:37:51.043 回答
12
您可以使用标记和弹出窗口
例子 ：
var popup;
var marker_layer = new OpenLayers.Layer.Markers( "Markers" );
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon_marker = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',
size,
offset);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(5.6, 50.6), icon_marker);
//here add mouseover event
marker.events.register('mouseover', marker, function(evt) {
popup = new OpenLayers.Popup.FramedCloud("Popup",
new OpenLayers.LonLat(5.6, 50.6),
null,
'<div>Hello World! Put your html here</div>',
null,
false);
map.addPopup(popup);
});
//here add mouseout event
marker.events.register('mouseout', marker, function(evt) {popup.hide();});
marker_layer.addMarker(marker);
map.addLayer(marker_layer);
于 2012-07-06T09:55:44.810 回答
3
这对我有用。最终很简单，但花了一段时间：
var marker = new OpenLayers.Marker(position, icon.clone());
boothLayer.addMarker(marker);
marker.events.register('mouseover', marker, function() {
var msg = booth.get('name') +' - ' + booth.get('premises');
var popup = new OpenLayers.Popup.FramedCloud("Popup",
position, null, '<div>'+msg+'</div>', null, false);
map.addPopup(popup);
marker.events.register('mouseout', marker,
setTimeout( function() { popup.destroy(); }, 4000));
});
请注意鼠标移出事件的 4000 微秒延迟 - 可能会更短，具体取决于您的使用。
于 2013-04-27T00:56:29.890 回答
1
我使用一个函数来添加它，这是一个简化的版本。请注意，您设置了详细信息并调用了底部的函数。另请注意，您不能在多个图层上拥有多个选择器 - 我认为只有添加的最后一个才会起作用，因此如果您希望在一个图层中有多个功能，则必须对其进行调整：
function addMarkerLayer(markerInfo){
var details= markerInfo.details || "<h3>"+markerInfo.title+"</h3>"+
"[Location] Lat:"+markerInfo.latitude + " Lon:"+markerInfo.longitude;
var features=[];
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(markerInfo.longitude, markerInfo.latitude),
{title: markerInfo.title, details:details, externalGraphic:markerInfo.icon},
{
externalGraphic:markerInfo.icon,
fillColor: markerInfo.markerColor || '#ff0',
fillOpacity: markerInfo.iconOpacity || 0.8,
graphicWidth : markerInfo.iconSize || 24,
graphicHeight : markerInfo.iconSize || 24,
strokeColor: markerInfo.markerStrokeColor || "#ee9900",
strokeOpacity: 1,
strokeWidth: 1,
pointRadius: 7
}
));
// create the layer with listeners to create and destroy popups
var vector = new OpenLayers.Layer.Vector(markerInfo.layerName, {
eventListeners: {
'featureselected': function(evt) {
var feature = evt.feature;
var popup = new OpenLayers.Popup.FramedCloud("popup",
OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
null,
feature.attributes.details,
null,
true);
feature.popup = popup;
map.addPopup(popup);
},
'featureunselected': function(evt) {
var feature = evt.feature;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
});
vector.addFeatures(features);
var selector = new OpenLayers.Control.SelectFeature(vector, {
hover: true
});
map.addLayer(vector);
map.addControl(selector);
}
var markerInfo={
title:'Washington DC',
latitude:38.8,
longitude:-77,
icon:"/icons/event.png",
iconSize:24
};
addMarkerLayer(markerInfo);
于 2013-01-25T16:59:14.310 回答
1
您需要使用 selectControl 来创建弹出窗口。为了让它响应悬停而不是单击在构造函数中设置悬停：真。
于 2012-04-01T19:51:06.050 回答
1
我用 ol 5.2 示例“自定义交互”openlayers.org/en/latest/examples/select-features.html 编写了一个工作示例
因此，您将要素添加到图层并将其添加到地图中，然后像这样创建新的交互
const interact = new ol.interaction.Select({condition: ol.events.condition.pointerMove});
它指定它将在悬停时选择一个特征（pointermove）然后你将它添加到你的地图并关联当交互选择一个特征时应该调用的函数（即当你悬停在一个特征上时）。
map.addInteraction(interact);
interact.on('select', showInfoWindow);
然后声明显示信息窗口的函数
function showInfoWindow(evt){
if(evt.selected.length>0){
const feature = evt.selected[0];
const id = feature.getId();
infoWindow.innerHTML = '<p>' + id + '</p>';
infoWindow.show();//if you have something like that, you could use an openLayers overlay
}
}
您应该注意，该事件将返回（在这种情况下）一个对象，当您将鼠标悬停在该对象中时，您可以在该对象的“选定”属性中找到选定的特征。在这种情况下，当您将鼠标悬停时，相同的对象将在“取消选择”属性中可用，直到您选择一个新对象
于 2018-10-12T13:25:12.257 回答
0
这个来自用户列表的示例非常有助于展示如何将悬停和单击事件分配给矢量图层。
于 2013-05-02T00:32:53.293 回答
-1
听起来你想看看“OpenLayers.Popup()”
此示例在您绘制多边形后显示一个弹出窗口，然后单击它，但您应该能够更改它以响应悬停。 http://openlayers.org/dev/examples/select-feature-openpopup.html
于 2011-12-24T00:23:21.440 回答