一、地图图片输出会产生跨域问题，如下：
导致地图图片不能输出。
问题分析：
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即可。
网友评论