一盒齿、地圖圖片輸出會產(chǎn)生跨域問題成福，如下：

導(dǎo)致地圖圖片不能輸出。

問題分析：

1.新建一個MVC框架灵再，把官網(wǎng)例子寫入mvc中肋层，官網(wǎng)例子能夠正常的輸出地圖圖片。把地圖換為自己的地圖如下：

? ? ? ? ?new ol.layer.Vector({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?source: new ol.source.Vector({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?url: 'http://192.168.0.3:6008/geoserver/adsa/ows? ? ? ? ? ? ? ? ?service=WFS&version=1.0.0&request=GetFeature&typeName=adsa:highway_geo&outputFormat=application%2Fjson',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? format: new ol.format.GeoJSON()

})})

配合OpenLayer的OSM地圖一起輸出,地圖圖片能夠正常輸出翎迁。

newol.layer.Tile({

source:newol.source.OSM()

})

但是如果使用切片地圖源栋猖，則不能夠正常輸出圖片錯誤會報如上圖問題：

varurlTemplate ='http://192.168.0.3:6077'+'/Map/L{z}/R{y}/C{x}.png';

var_source =newol.source.XYZ({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?crossOrigin:'anonymous',

? ? ? ? ? ? ? ? ? ? ? ? ? ? //crossOrigin: []跨域設(shè)置

? ? ? ? ? ? ? ? ? ? ? ? ? ?tileGrid:newol.tilegrid.TileGrid({

? ? ? ? ? ? ? ? ? ? ? ? ? //extent:[-20037508.3427508,]

? ? ? ? ? ? ? ? ? ? ? ? ? origin:[-20037508.342787001,20037508.342787001],

? ? ? ? ? ? ? ? ? ? ? ? ? projection:this.projection,

? ? ? ? ? ? ? ? ? ? ? ? ? ?tileSize: 256,

? ? ? ? ? ? ? ? ? ? ? ? ? ?tileUrlFunction:function(tileCoord){

? ? ? ? ? ? ? ? ? ? ? ? ? ?returnurlTemplate.replace('{z}', (Array(2).join(0) +(tileCoord[0]).toString(10).toUpperCase()).slice(-2))

? ? ? ? ? ? ? ? ? ? ? ? ? .replace('{x}', (Array(8).join(0) +

? ? ? ? ? ? ? ? ? ? ? ? ? ?(tileCoord[1]).toString(16).toUpperCase().replace('-','')).slice(-8))

? ? ? ? ? ? ? ? ? ? ? ? ? ? .replace('{y}', (Array(8).join(0) +

? ? ? ? ? ? ? ? ? ? ? ? ? (-tileCoord[2]-1).toString(16).toUpperCase().replace('-','')).slice(-8));

},

wrapX:false

});

綜上可知：ol.layer.Vector()的圖層既矢量可以正常輸出，而切片地圖不能夠正常輸出汪榔，原因：ol.layer.Vector()的source數(shù)據(jù)下載到了瀏覽器然后渲染故沒有跨域問題蒲拉，地圖圖片能夠正常輸出。

2．打開瀏覽器調(diào)試工具查看Network發(fā)現(xiàn)ol.source.OSM()也是一個切片地圖但是他卻能夠輸出

于是添加ol.layer.Image()，因為ol.layer.Image()的source為請求的WMS圖片服務(wù)和切片類似只是這個是動態(tài)生成的雌团。

二燃领、離線地圖的跨域問題，當(dāng)設(shè)置離線地圖ol.source.XYZ()的crossOrigin:'anonymous'以后锦援，不能在頁面上正常顯示離線地圖報錯如下：

打開IIS管理器在web.config中添加如下字段即可讓IIS支持跨域：

是IIS支持跨域請求

查看openlayer文檔可知ol.source.OSM()默認設(shè)置參數(shù)crossOrigin為anonymous猛蔽；查看ol.source.ImageWMS可知他的crossOrigin為null,所以只需要把crossOrigin設(shè)置為anonymous即可。