Question

我需要在openlayers地图中添加一些版权信息文字。该网站提供了一个按钮，以与http://openlayers.org/en/latest/examples/export-map.html中显示的类似方式将地图导出到PNG。因此，版权文本也必须在导出的PNG地图上显示。

因此，我不能对版权文本使用html叠加，但必须将文本直接打印到画布中，因为＆＃34;将地图导出为PNG＆＃34;这些东西只能导出画布中的内容（没有html控件或html叠加）。

我尝试了两种方法。两个都不工作;）

使用 ol.source.ImageCanvas ，如此jsfiddle所示。问题是，当放大或缩小时，文本跳跃。但是文本应该是静态的。
在OpenLayers初始化之后获取OpenLayers画布，然后使用此画布直接。

这是 OpenLayers完成初始化后运行的第二种方法的代码：

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillText('© My Copyright Text'), 500, 600);

这打印什么都没有，我不知道为什么。什么时候有什么特别的＆＃34;写＆＃34;到openlayers画布？

那么将一些简单文本添加到地图画布的最佳方法是什么？

Answer 1

您可以使用地图的postrender事件，获取地图画布，并根据您的想法修改它。在export-map.html example中，postrender监听器已经注册，因此您可以轻松修改它以添加归属文字，例如

map.once('postcompose', function(event) {
  var canvas = event.context.canvas;
  // Add attribution text
  event.context.textAlign = 'right';
  event.context.fillText('© My Copyright Text', canvas.width - 5, canvas.height - 5);
  // Now export the map
  canvas.toBlob(function(blob) {
    saveAs(blob, 'map.png');
  });
});

我使用以下代码创建了一个有效的JSFiddle：https://jsfiddle.net/ahocevar/8c4knpu6/

Answer 2

您可以使用ol.Overlay：

https://jsfiddle.net/x66v59wt/2/

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      title: 'basemap',
      source: new ol.source.Stamen({ layer: 'toner' })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-97, 38]),
    zoom: 4
  }),
  overlays: [
    new ol.Overlay({
      id: 'copyright',
      element: document.getElementById('copyright'),
      position: ol.proj.fromLonLat([-97, 38])
    })
  ]
});

// If you want to text to be "pinned" to the map center, for example
map.getView().on('change:center', function (e) {
  map.getOverlayById('copyright').setPosition(this.getCenter());
});

...

<div id="map"></div>
<div style="display: none;">
  <div id="copyright">  
    © My Copyright text
    <br>
    Should be statically positioned even when zooming
  </div>
</div>

将版权信息文本直接打印到OpenLayers画布中

2 个答案: