Question

我在我的应用程序中将OSM作为基础层，最重要的是我有来自本地地理服务器的几个地图图层。

现在我需要打印这些图层，并且我有一个图层控制工具，我可以从中启用和禁用图层。

如果我从本地地理服务器中删除所有图层，我可以使用html2canvas打印（如果只有OSM图层）。但是如果我本地地理服务器的图层可见，我就无法打印。

这是我的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>Export map example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
    <div id="no-download" class="alert alert-error" style="display: none">
      This example requires a browser that supports the
      <a href="http://caniuse.com/#feat=download">link download</a> attribute.
    </div>
    <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
  </div>
</div>

</div>
<script>
var baseLayerGeryBoundary = new ol.layer.Tile({
    source: new ol.source.TileWMS(({
          url: 'http://localhost:8080/geoserver/mydata/wms',
          params: {'LAYERS': 'mydata:Road'},
          serverType: 'geoserver'
        })),
        name: 'Road Boundary',
        isBaseLayer:false,
        crossOrigin:true,
        visible:true
});

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/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      })
    }),
    baseLayerGeryBoundary
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var exportPNGElement = document.getElementById('export-png');

if ('download' in exportPNGElement) {
  exportPNGElement.addEventListener('click', function(e) {
    convert(document.getElementById('map'));
  }, false);
} else {
  var info = document.getElementById('no-download');
  /**
   * display error message
   */
  info.style.display = '';
}



        function convert(target) {
            html2canvas(target, {
                "proxy": "html2canvasproxy.php",
                "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                "onrendered": function(canvas) {
                    var img = new Image();
                        var url = canvas.toDataURL("image/png");
                        window.open(url, "_blank");
                    }
            });
        }
</script>
</body>
</html>

有人能说出这里有什么问题吗？我在我的应用程序中使用html2canvasproxy.php。但我仍然无法打印图层。

这是我得到的消息：

html2canvas: Preload starts: finding background-images html2canvas.min.js:7:2811
html2canvas: Preload: Finding images html2canvas.min.js:7:2811
html2canvas: Preload: Done. html2canvas.min.js:7:2811
html2canvas: start: images: 1 / 1 (failed: 0) html2canvas.min.js:7:2811
Finished loading images: # 1 (failed: 0) html2canvas.min.js:7:2811
html2canvas: Renderer: Canvas renderer done - returning canvas obj html2canvas.min.js:7:2811

我用openlayers缩放图标获取图像但没有图像，只有gery图像，但我将OSM作为背景，并在其上面有一些图层。

AJ

Answer 1

这看起来像是一个跨领域问题。您可以通过从服务器和crossOrigin选项正确配置CORS标头，或通过从同一主机（本机或通过代理）提供磁贴来解决此问题。

请注意，crossOrigin选项应该是String，而不是布尔值。

从本地geoserver和osm层作为背景打印wms图层时出现OL3和html2canvas错误

1 个答案: