Печать Текст, относящийся к авторскому праву, прямо в холст OpenLayers

Question

Мне нужно добавить текст с информацией об авторских правах на мою карту с открытыми файлами. На сайте есть кнопка для экспорта карты в PNG аналогично тому, как показано в http://openlayers.org/en/latest/examples/export-map.html Итак, текст с текстом должен быть включен и на экспортированную карту PNG.

Следовательно, я не могу использовать наложение html для текста авторского права, но должен печатать текст непосредственно в холсте, потому что материал «Экспортировано в PNG» работает с экспортом только того, что находится в холсте (без элементов управления html или html overlays).

Я пробовал два подхода. Оба не работают;)

1. Использование ol.source.ImageCanvas, как показано в этом jsfiddle. Проблема заключается в том, что при масштабировании или выходе, тогда текст прыгает. Но текст должен быть просто статичным.

2. По получению OpenLayers холста после OpenLayers имеет инициализирован, а затем с помощью этого холста непосредственно.

Вот код для 2-го подхода, который запускается после OpenLayers сделал свое initilisation:

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

Это печатает только вообще ничего, и я понятия не имею, почему. Есть ли что-то особенное, когда «писать» на холст с открытыми слоями?

Итак, что было бы лучшим подходом для добавления простого текста к холсту карты?

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>