Openlayers 3. 如何制作功能提示

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 示例。它显示了当您单击图标功能时如何弹出窗口。相同的原则适用于任何类型的功能。这是我做的时候用的例子。

Answer 3

这是一个使用ol 库的基本示例。最重要的是定义overlay 对象。我们需要一个元素来附加我们想要在工具提示中显示的文本、一个显示工具提示的位置以及工具提示将开始的偏移量（x 和 y）。

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

现在，我们需要动态更新工具提示的innerHTML。

function displayTooltip(evt) {
  const pixel = evt.pixel;
  const 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);

let styleCache = {};
const styleFunction = function(feature, resolution) {
  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
  // standards-violating <magnitude> tag in each Placemark.  We extract it from
  // the Placemark's name instead.
  const name = feature.get('name');
  const magnitude = parseFloat(name.substr(2));
  const radius = 5 + 20 * (magnitude - 5);
  
  let style = styleCache[radius];
  if (!style) {
    style = [new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: 'rgba(255, 153, 0, 0.4)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 204, 0, 0.2)',
          width: 1
        })
      })
    })];
    styleCache[radius] = style;
  }
  
  return style;
};

const vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'https://gist.githubusercontent.com/anonymous/5f4202f2d49d8574fd3c/raw/2c7ee40e3f4ad9dd4c8d9fb31ec53aa07e3865a9/earthquakes.kml',
    format: new ol.format.KML({
      extractStyles: false
    })
  }),
  style: styleFunction
});

const raster = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'toner'
  })
});

const map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

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

function displayTooltip(evt) {
  const pixel = evt.pixel;
  const 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);

#map {
  position: relative;
  height: 100vh;
  width: 100vw;
  
}
.tooltip {
  position: relative;
  padding: 3px;
  background: rgba(0, 0, 0, .7);
  color: white;
  opacity: 1;
  white-space: nowrap;
  font: 10pt sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" class="map">
  <div id="tooltip" class="tooltip"></div>
</div>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css">