Openlayers 3.如何为特征制作tootlip [英] Openlayers 3. How to make tootlip for feature

问题描述

现在，我将项目从openlayers 2移到openlayers3.不幸的是，我找不到如何显示功能的标题(工具提示).在OL2中，有一种名为graphicTitle的样式. 您能给我一些建议，如何在OL3上实现工具提示吗?

Now I'm moving my project from openlayers 2 to openlayers 3. Unfortunately I can't find how to show title (tooltip) for feature. In OL2 there was a style named graphicTitle. Could you give me advice how to implement tooltip on OL3?

推荐答案

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

This is example from ol3 developers. 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);

这篇关于Openlayers 3.如何为特征制作tootlip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！