本人初入openlayers3,公司对webgis开发有需求,需要将地图能够实现以图片的形式保存的功能,我借鉴的是openlayers3的demo,其源码如下:
<!DOCTYPE html>
<html>
<head>
<title>Map Export</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="no-download" class="alert alert-danger" 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 btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>
<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: 'http://openlayers.org/en/v3.18.2/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
})
})
],
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() {
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
exportPNGElement.href = canvas.toDataURL('image/png');
});
map.renderSync();
}, false);
} else {
var info = document.getElementById('no-download');
/**
* display error message
*/
info.style.display = '';
}
</script>
</body>
</html>
这里是没有问题的,但是我要截图的地图资源不是osm格式,是Google的天地图模式,即
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: null,
//加载在线卫星图
url: "http://mt0.google.cn/vt/lyrs=y@234000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}"
})
})
],
这时候就发现会出现以下问题:
2copy.html:49 Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
说是图片跨域问题,恳请各位大神,帮帮忙~感谢!!!