OSM - 将鼠标悬停在标记上时显示图像叠加

Question

我正在使用嵌入在页面中的OpenStreetMap。以下是我如何创建标记的示例 - 作为矢量图层的特征：

map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
// Define markers as "features" of the vector layer:
var feature1 = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(14.4253353, 50.0865514).transform(epsg4326, projectTo), {
description: 'Slovanský dům'
}, {
externalGraphic: 'img/locator.png',
graphicHeight: 40, graphicWidth: 35, graphicXOffset: -17, graphicYOffset: -40
}
);
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
vectorLayer.addFeatures(feature1);

我想为每个标记添加一个带有图像的叠加层，当将鼠标指针悬停在标记上时，将显示这些标记。可能吗？

Answer 1

这是4.5.0版本，希望有帮助

网页元素

<div id="overlay">
[image/content]
</div>

JS - 获取覆盖

var container = document.getElementById('overlay');

JS - 添加到地图

var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);

JS - 设置悬停

var hasFeature = false
map.on('pointermove', function (evt) {
map.forEachFeatureAtPixel(evt.pixel, function (feature) {
var coordinate = evt.coordinate;
overlay.setPosition(coordinate);
hasFeature = true;
});
if (!hasFeature) {
overlay.setPosition(undefined);
}
}