概述

GIS的“5M”应用中，有一个非常重要的应用领域——制图（Mapping）。然而现在的趋势是webgis的应用更为广泛，如何在web端实现地图的制图、导出与打印就是一个非常有用的功能，本文将结合html2canvas实现区域地图的导出。

实现后效果

实现思路

实现代码

const dragPanInteraction = map
  .getInteractions()
  .getArray()
  .find(interaction => {
    return interaction instanceof ol.interaction.DragPan
  })
const dblClickZoomInteraction = map
  .getInteractions()
  .getArray()
  .find(interaction => {
    return interaction instanceof ol.interaction.DoubleClickZoom
  })
const mouseWheelZoomInteraction = map
  .getInteractions()
  .getArray()
  .find(interaction => {
    return interaction instanceof ol.interaction.MouseWheelZoom
  })


function base64Img2Blob(code){
  var parts = code.split(';base64,');
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);
  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: contentType});
}

function downloadFile(fileName, content){
  var aLink = document.createElement('a');
  var blob = base64Img2Blob(content); //new Blob([content]);
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(evt);
  aLink.click()
}

function setZoomVisible(display) {
  setDomDisplay('.ol-zoom', display)
}

function setDomDisplay(dom, display) {
  document.querySelector(dom).style.display = display
}

function setNorthArrowVisible(display) {
  setDomDisplay('.north-arrow', display)
}

function getSizeForZoom(extent, zoom) {
  const res = map.getView().getResolutionForZoom(zoom)
  // 留白
  const [paddingx, paddingy] = [100, 100]
  const [xmin, ymin, xmax, ymax] = extent
  const w = (xmax - xmin) / res + paddingx * 2;
  const h = (ymax - ymin) / res + paddingy * 2;
  return [w, h]
}

document.getElementById('setting').addEventListener('click', () => {
  // 测试数据
  const coords = [ [ [ 113.99364, 22.52712 ], [ 113.99817, 22.52795 ], [ 113.99867, 22.52494 ], [ 113.99819, 22.52449 ], [ 113.99463, 22.52253 ], [ 113.99439, 22.52256 ], [ 113.99364, 22.52712 ] ] ]
  const geom = new ol.geom.Polygon(coords)
  geom.transform('EPSG:4326', 'EPSG:3857')
  vectorSource.clear()
  const feature = new ol.Feature({
    geometry: geom
  })
  vectorSource.addFeature(feature)
  const extent = geom.getExtent()
  // 添加级别适配
  let w, h, z;
  const max = 3000
  for (let i = 18;i>10;i--) {
    const [_w, _h] = getSizeForZoom(extent, i)
    if(_w < max || _h < max) {
      z = i
      w = _w
      h = _h
      break;
    }
  }
  const view = map.getView()
  view.setZoom(z)
  const div = map.getTargetElement()
  div.style.width = w + 'px'
  div.style.height = h + 'px'
  const size = [w, h]
  map.setSize(size)
  view.fit(geom, {
    size: size
  })
  // 禁用拖拽、双击放大，滚轮放大
  dragPanInteraction.setActive(false)
  dblClickZoomInteraction.setActive(false)
  mouseWheelZoomInteraction.setActive(false)

  // 设置title位置
  const mapTitle = document.querySelector('.map-title')
  const title = mapTitle.innerText
  const canvas = map.getTargetElement().querySelector('canvas')
  const ctx = canvas.getContext('2d')
  ctx.font="18px 微软雅黑 bold";
  const tw = ctx.measureText(title)
  mapTitle.style.left = `calc(50% - ${tw.width / 2}px)`

  // dom控制
  setDomDisplay('.ol-zoom', 'none')
  setDomDisplay('.north-arrow', 'block')
  setDomDisplay('.map-title', 'block')
  setDomDisplay('.map-info', 'block')
})

document.getElementById('export').addEventListener('click', () => {
  const div = map.getTargetElement()
  html2canvas(div).then(canvas => {
    downloadFile('map.png', canvas.toDataURL("image/png"));
  });
})

document.getElementById('print').addEventListener('click', () => {
  document.querySelector('.tools').style.display = 'none'
  window.print()
})