将版权信息文本直接打印到 OpenLayers canvas

Question

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

因此，我不能对版权文本使用 html 覆盖，而必须将文本直接打印到 canvas，因为 "Exported the map to PNG" 的内容只能导出canvas（无 html 控件，或 html 叠加层）。

我尝试了两种方法。两者都不起作用 ;)

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

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

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

这根本不打印任何东西，我不知道为什么。 "writing"到openlayerscanvas有什么特别的吗？

那么向地图添加一些简单文本的最佳方法是什么 canvas？

Answer 1

您可以为此使用 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>

Answer 2

你可以使用地图的postrender事件，获取地图canvas，想怎么修改就怎么修改。在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/

将版权信息文本直接打印到 OpenLayers canvas

Print Copyright info text directly into OpenLayers canvas

openlayers

openlayers-3