openlayers простой наведением мыши на маркер

Question

Звучит так просто, но я не могу найти учебник для новичков: кто-нибудь может дать мне простой пример того, как я создаю (векторные) маркеры в OpenLayers, которые открывают информационное окно при наведении курсора и даже закрывают его при наведении мышью?

Я нашел части этого объясненного, но не все это ...

Answer 1

Для простого примера того, как это сделать, вам нужно сделать пару вещей:

Создайте векторный слой для хранения ваших маркеров и добавьте его на карту:

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]);

Создайте элемент управления select для вашего слоя и зарегистрируйте функцию для создания всплывающего окна, когда пользователь наводит курсор на маркер:

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);
}, // ...

Answer 2

Вы можете использовать маркер и всплывающее окно

пример:

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);

Answer 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 микросекунд при отключении мыши - возможно, она может быть меньше, зависит от вашего использования.

Answer 4

Я использую функцию, чтобы добавить ее, вот упрощенная версия.Обратите внимание, что вы устанавливаете детали и вызываете функцию внизу.Также обратите внимание, что у вас не может быть нескольких селекторов на нескольких слоях - я думаю, что будет работать только последний добавленный, поэтому вам придется настроить его, если вы хотите, чтобы в одном слое было несколько объектов:

Answer 5

Вам нужно использовать selectControl для создания вашего всплывающего окна. Чтобы заставить его реагировать на hover вместо того, чтобы щелкнуть set hover: true в конструкторе.

Answer 6

Я написал рабочий пример этого с примером 5.2 «Пользовательское взаимодействие». openlayers.org/en/latest/examples/select-features.html

Таким образом, вы добавляете объекты в слой и добавляете его на карту, а затем создаете новое взаимодействие, подобное этому

const interact = new ol.interaction.Select({condition: ol.events.condition.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, когда вы наводите на нее курсор. При наведении курсора в этом случае один и тот же объект будет доступен в атрибуте «отменено», пока вы не выберете новый

Answer 7

Этот пример из списка пользователей был очень полезен для демонстрации того, как назначать события наведения и щелчка для векторного слоя.

Answer 8

Звучит так, как будто вы хотите посмотреть на «OpenLayers.Popup ()»

. В этом примере показано всплывающее окно после того, как вы рисуете многоугольник, затем нажимаете на него, но вы можете изменить его, чтобы ответитьвместо этого паритьhttp://openlayers.org/dev/examples/select-feature-openpopup.html