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 - 设置onHover

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 - 将鼠标悬停在标记上时显示图像叠加

1 个答案: