七章-88-导出地图PNG

作者: 彩云飘过 | 来源:发表于2020-03-27 17:54 被阅读0次

七章-88-导出地图PNG
png导出svg
11.4 高德地图案列
Springboot导出jar包
iOS开发--打包提交审核
如何让Xmind导出背景透明的png？
apns p12证书转pem证书
Xcode编译： pngcrush caught libpng
OpenLayers3关于Map Export的Canvas跨域
PNG-8、24、32区别介绍

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1088.html ，对应的官网示例 https://openlayers.org/en/latest/examples/zoomslider.html?q=ZoomSlider

image.png

导出地图pdf 见十章-99导出地图PDF

核心技术点：
将canvas的内容变为Blob
Blob保存为png / jpg
利用了第三方库FileSaver ,把地图保存成地图图片

<!DOCTYPE html>
<html>

<head>
  <title>导出png</title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css" />
  <link rel="stylesheet" href="../include/bootstrap.css" type="text/css" />
  <script src="../include/jquery.js"></script>
  <script src="../include/bootstrap.min.js"></script>
  <script src="../include/ol.js"></script>
  <script src="../include/FileSaver.min.js"></script>
</head>
<style></style>

<body>

  <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> 导出为 PNG</a>
  <div id="map" class="map"></div>
  <div id="info">&nbsp;</div>
  <script>
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
          source: new ol.source.Vector({
            url: '../data/lands.geojson',
            format: new ol.format.GeoJSON()
          })
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });

    document.getElementById('export-png').addEventListener('click', function () {
      map.once('rendercomplete', function (event) { //once 只执行一次 rendercomplete
        var canvas = event.context.canvas;
        if (navigator.msSaveBlob) { //IE浏览器使用以下导出操作
          navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
        } else {
        //非IE浏览器使用以下导出操作
          canvas.toBlob(function (blob) {
            saveAs(blob, 'map.png');
          });
        }
      });
      map.renderSync();//立即触发一次rendercomplete事件，这里用同步渲染，不用等渲染完成就可以执行导出操作
    });
  </script>
</body>

</html>