如何使用 OpenLayers 制作截图工具？答案

【问题标题】：How to make Snipping Tool using OpenLayers?如何使用 OpenLayers 制作截图工具？
【发布时间】：2019-07-09 22:53:37
【问题描述】：

我是 OpenLayers 的新手，想知道如何制作类似 Windows 的 Snipping Tool 之类的东西。

我有一张地图，需要能够在地图上绘制矩形、制作屏幕截图并将其加载到另一个区域的工具。

这将使用 JavaScript 完成。

我试图在互联网上找到类似的东西，但没有运气。

【问题讨论】：

标签： openlayers

【解决方案1】：

这是https://openlayers.org/en/latest/examples/box-selection.html https://openlayers.org/en/latest/examples/export-map.html这些示例的组合，其中裁剪后的画布导出为 PNG，但您可以用它做任何您想做的事情。

  var vectorSource = new ol.source.Vector({
    url: 'https://openlayers.org/en/v5.3.0/examples/data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  });


  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: vectorSource
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  // a normal select interaction to handle click
  var select = new ol.interaction.Select();
  map.addInteraction(select);

  var selectedFeatures = select.getFeatures();

  // a DragBox interaction used to select features by drawing boxes
  var dragBox = new ol.interaction.DragBox({
    condition: ol.events.condition.platformModifierKeyOnly
  });

  map.addInteraction(dragBox);

  dragBox.on('boxend', function() {

    // convert geometry to pixels (extent doesn't gives correct bounds when view is rotated)

    var left = Infinity;
    var top = Infinity;
    var bottom = -Infinity;
    var right = -Infinity;

    dragBox.getGeometry().getCoordinates()[0].forEach(function(coord) {
      var pixel = map.getPixelFromCoordinate(coord);
      left = Math.min(left, pixel[0]);
      right = Math.max(right, pixel[0]);
      top = Math.min(top, pixel[1]);
      bottom = Math.max(bottom, pixel[1]);
    });

    map.once('rendercomplete', function(event) {
      var image = event.context.canvas;
      var canvas = document.createElement('canvas');
      canvas.width = right - left;
      canvas.height = bottom - top;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(image, left, top, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

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

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.ol-dragbox {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(100,150,0,1);
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<div id="map" class="map"></div>

【讨论】：