logo标签列表

OpenLayers简单的鼠标悬停在标记上

openlayersmouseovermarkerinfowindow
22

听起来很简单，但我找不到任何新手教程：有没有人能够给我一个简单的例子，如何在OpenLayers中创建(vektor)标记，在鼠标悬停时打开信息窗口，甚至在鼠标移开时关闭它？

我找到了一部分解释，但不是全部...

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);
}, // ...
相比于为每个添加到图层中的标记添加事件，这是一个更好的解决方案。 - Aerokneeus
13
您可以使用以下代码中的 marker 和 popup。
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);
谢谢。可能你应该添加一个检查，如果标记已经存在，则显示它而不是多次创建。在复杂的地图上，否则可能会引起内存泄漏。 - Fedir RYKHTIK
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微秒延迟 - 可能可以更短，这取决于您的使用情况。
1
你需要使用selectControl来创建你的弹出框。为了让它响应悬停而不是点击，在构造函数中设置hover:true即可。
1
我用 OpenLayers 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
    }
}

请注意，事件将返回一个对象（在此情况下），您可以在其中的“selected”属性中找到所选要素。当您悬停在其上时。当您取消悬停时，在此情况下，相同的对象将在“deselected”属性中可用，直到您选择新对象。

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);
0
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接