一 Canvas跨域現(xiàn)象

地圖導出是地圖中常用的功能，并且OpenLayers3中也提供了兩個地圖導出的例子:
http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html。
看到這兩個例子我們都很興奮，直接copy過來不就實現(xiàn)導出地圖了嗎？so easy，媽媽再也不用擔心我導出不了地圖圖片啦！
但當我們抄好代碼執(zhí)行時，現(xiàn)實就是這么赤裸裸的打臉：
我的代碼如下：

?

//街道圖Layer.streetLayer=new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'})});

例子的圖層代碼如下：

?

layer=new ol.layer.Tile({ source: new ol.source.OSM() });

沒多寫一行代碼的飄逸，抄過來直接運行，報錯如下：

?

跨域錯誤.png

二 問題排查

檢查案例源碼發(fā)現(xiàn)和我抄襲的代碼幾乎一模一樣，唯一區(qū)別是我使用的是谷歌底圖，例子使用的是osm的source。

?

new ol.layer.Tile({ source: new ol.source.OSM() }),

為了一看究竟，我們查看osm的source源碼如下：

osm souce源碼

?

恍然大悟，原來只需要添加這 crossOrigin:'anonymous'就可以了。

于是改寫重置自己的谷歌圖層代碼如下：

?

//街道圖 Layer.streetLayer=new ol.layer.Tile({ source: new ol.source.XYZ({ crossOrigin: 'anonymous', url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965' }) });

這下打印正常了。

三 加載自己的wms底圖還是跨域錯誤

我們上面通過對谷歌地圖加crossOrigin: 'anonymous'實現(xiàn)了地圖輸出了，解決canvas跨域問題了，但一般我們地圖是底圖+業(yè)務底圖（如wms）的，這時候打印發(fā)現(xiàn)還是報錯。

?

Layer.streetLayer=new ol.layer.Tile({source: new ol.source.XYZ({crossOrigin: 'anonymous',url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'})}); Layer.wmsship = new ol.layer.Tile({source: new ol.source.TileWMS({url: geoserverhost+'/gwc/service/wms',params: {'FORMAT': 'image/png','VERSION': '1.1.1',tiled: true,STYLES: '',LAYERS: 'ships:ta_pos_latest'}})});

這個例子我們使用了谷歌底圖疊加自己的wms/gwc等瓦片圖，發(fā)現(xiàn)export還是報跨域錯誤，理所當讓的，我給Layer.wmsship設置crossOrigin: 'anonymous'，以為就可以了，但不幸的是仍然報跨域錯誤，一點沒反應。

四 設置服務器cors徹底解決

我們發(fā)現(xiàn)，谷歌，osm設置crossOrigin就可以，我們自己wms設置的crossOrigin還是不行。問題出在哪里咧？查閱資料可知，osm,google的服務器一定設置了cors，所以客戶端設置crossOrigin才會起作用，而我們自己的wms或者瓦片所在的服務器沒有設置cors，所以客戶端設置或者不設置crossOrigin，都是無效的。也就是說，只有自己的服務器設置了cors，crossOrigin才會起到作用。
我們地圖是geoserver發(fā)布的wms或者gwc，對geoserver設置cors，參考之前的博客：http://blog.csdn.net/freeland1/article/details/41204485 ，根據(jù)第三節(jié)的cors設置下自己的服務器。

服務器設置完畢后，代碼改為如下

?

Layer.streetLayer=new ol.layer.Tile({visible: true,source: new ol.source.XYZ({crossOrigin: 'anonymous',url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'})}); Layer.wmsship = new ol.layer.Tile({source: new ol.source.TileWMS({crossOrigin: 'anonymous',url: geoserverhost+'/gwc/service/wms',params: {'FORMAT': 'image/png','VERSION': '1.1.1',tiled: true,STYLES: '',LAYERS: 'ships:ta_pos_latest'}})});

地圖輸出終于不報錯了，perfect！

作者：遙想公瑾當年
鏈接：https://www.jianshu.com/p/4beb4057f7be
來源：簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

總結

以上是生活随笔為你收集整理的OpenLayers3关于Map Export的Canvas跨域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。