Добавление экспорта в PNG-функциональность для OpenLayers - PullRequest
Новая
       12

Добавление экспорта в PNG-функциональность для OpenLayers

0 голосов
/ 06 ноября 2019

Я объединил html2canvas с OpenLayers вер. 6.1.1, чтобы предоставить, как я надеюсь, лучший пример экспорта в PNG.

Я попытался включить пример, показанный на сайте OpenLayers, в свое приложение, но это не работает во всех браузерах (особенно Safari). 

<script type='text/javascript' src='javascript/html2canvas.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,Promise"></script>

Используя эти библиотеки javascript и текущую версию OpenLayers (6.1.1), я добавил кнопку, отображаемую на моемкарта, которая имеет следующую функцию: 

var button_p = document.createElement('button');
button_p.innerHTML = 'PNG';
button_p.title = 'Export map as png.';

var pngfunction = function() {
  map.once('rendercomplete', function(event) {
    html2canvas(document.getElementById('map')).then(function(canvas) {
      var ctx = canvas.getContext("2d");
      var now = new Date();
      var monthy = now.getMonth() + 1; // remember months are stored in array numbered 0-11
      ctx.fillStyle = "#0000FF";
      ctx.font = "12px Arial";
      ctx.fillText(monthy + "-" + now.getDate() + "-" + now.getFullYear() + " " + now.getHours() + ":" + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes() + ":" + (now.getSeconds() < 10 ? '0' : '') + now.getSeconds(), 10, 20);

      if (navigator.msSaveBlob) {
    navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
      } else {
    canvas.toBlob(function(blob) {
      saveAs(blob, 'map.png');
        });
      }
    });
  });
  map.renderSync();
};
button_p.addEventListener('click', pngfunction, false);

Так как эта кнопка является частью класса 'ol-control', и я не хочу, чтобы эти элементы управления были частью результирующего PNG, я округляю эти элементыи примените следующий код, который удаляет эти элементы управления из PNG: 

var removals = document.getElementsByClassName('ol-control');
for(var i=0; i < removals.length; i++) { removals[i].setAttribute('data-html2canvas-ignore','true'); }

Но так как я хочу видеть стрелку севера, я удаляю этот атрибут, который я только что добавил к этому элементу управления, используя следующее: 

document.getElementsByClassName('ol-rotate')[0].removeAttribute('data-html2canvas-ignore');

1 Ответ

0 голосов
/ 06 ноября 2019

Взгляните на ol-et Print control , чтобы получить изображение старой карты.

...