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版本，希望对你有帮助

HTML 个元素

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

OSM - 将鼠标悬停在标记上时显示图像覆盖

OSM - show image overlay when hovering over marker

overlay

openlayers

marker