Question

现在我将我的项目从openlayers 2移动到openlayers 3.不幸的是，我无法找到如何显示功能的标题（工具提示）。在OL2中有一个名为graphicTitle的样式。你能给我一些如何在OL3上实现工具提示的建议吗？

Answer 1

这是来自ol3开发人员的示例。 jsfiddle.net/uarf1888/

var tooltip = document.getElementById('tooltip');
var overlay = new ol.Overlay({
  element: tooltip,
  offset: [10, 0],
  positioning: 'bottom-left'
});
map.addOverlay(overlay);

function displayTooltip(evt) {
  var pixel = evt.pixel;
  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
  });
  tooltip.style.display = feature ? '' : 'none';
  if (feature) {
    overlay.setPosition(evt.coordinate);
    tooltip.innerHTML = feature.get('name');
  }
};

map.on('pointermove', displayTooltip);

Answer 2

这是openlayers网站上的Icon Symobolizer示例。它显示了单击图标功能时如何弹出窗口。同样的原则适用于任何类型的功能。这就是我在做我的时候用的例子。

Openlayers 3.如何制作功能的tootlip

2 个答案: