openlayer输出地图图片的跨域问题

一、地图图片输出会产生跨域问题，如下：

导致地图图片不能输出。

问题分析：

1.新建一个MVC框架，把官网例子写入mvc中，官网例子能够正常的输出地图图片。把地图换为自己的地图如下：

         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: []跨域设置

                           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数据下载到了浏览器然后渲染故没有跨域问题，地图图片能够正常输出。

2．打开浏览器调试工具查看Network发现ol.source.OSM()也是一个切片地图但是他却能够输出

于是添加ol.layer.Image()，因为ol.layer.Image()的source为请求的WMS图片服务和切片类似只是这个是动态生成的。

二、离线地图的跨域问题，当设置离线地图ol.source.XYZ()的crossOrigin:'anonymous'以后，不能在页面上正常显示离线地图报错如下：

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

是IIS支持跨域请求

查看openlayer文档可知ol.source.OSM()默认设置参数crossOrigin为anonymous；查看ol.source.ImageWMS可知他的crossOrigin为null,所以只需要把crossOrigin设置为anonymous即可。