Question

使用ol-cesium构建应用程序，具体取决于WMS，可能会出现跨源错误：

"Image from origin 'http://www.ifremer.fr' has been blocked
from loading by Cross-Origin Resource Sharing policy: 
No 'Access-Control-Allow-Origin' header is present on 
the requested resource. Origin 'http://localhost:8080' 
is therefore not allowed access"

我无法在使用的WMS上设置CORS标头（如此处https://github.com/openlayers/ol3-cesium/issues/127所示）。

看起来可以在Cesium级别设置代理（参见https://cesiumjs.org/2013/01/04/Cesium-Imagery-Layers-Tutorial/）。

是否可以在OL级别进行设置，以便将其设置为Cesium级别？如果是，怎么样？

Answer 1

您只需修改URL即可使用代理，而不是通过向OL3讲授代理。例如，如果您的WMS服务器是：

http://www.example.com/geoserver/ows

您只需将此网址传递给OL3即可通过/proxy处理您的代理：

/proxy/http://www.example.com/geoserver/ows

Answer 2

使用https://github.com/openlayers/ol3-cesium/pull/358，用户现在可以在图层的源上设置olcs.proxy属性。例如：

source.set('olcs.proxy', '/myproxy/url');

Answer 3

查看OL3-Cesium的初始化代码，没有内置的功能可以在OL级别应用代理。

您可以尝试复制他们创建的图层的imageryProvider设置，并在新图层上包含代理。

我还没试过这个，所以我不知道这是否有用，但如果OL3不打算在不久的任何时候发布更新，那么它值得一试此

Answer 4

ol3代码库中的

A quick code search表示您无法在OL级别设置代理。

只需通过公共CORS代理使用WMS URL（首先）。我已回答a similar question 它可能会有所帮助。

Answer 5

我没有使用Cesium，只有ThreeJS，但是在没有一点图像复制技巧的情况下得到了相同的CORS问题。这对我有用 -

function loadWmsImage( url, params, cb ){
  var tmpImage = new Image();
  var wmsPng = url + jQuery.param( params );
  tmpImage.onload = function(){
    var canv = document.createElement('canvas');
    var ctx = canv.getContext('2d');
    canv.width = this.width;
    canv.height = this.height;
    ctx.drawImage(this, 0, 0);
    cb(canv.toDataURL());
  }
  tmpImage.crossOrigin = 'anonymous';
  tmpImage.src =  wmsPng;
}

loadWmsImage( htMapUrl, htMapParams,
  function(img){
    customUniforms.bumpTexture.value = 
      new THREE.ImageUtils.loadTexture(img);
  });

Answer 6

花很多时间尝试并获得经验。........〜_〜

WMTS olcs.proxy示例：

var o_tileGrid = {
  origin: ol.extent.getTopLeft(projectionExtent),
  resolutions: resolutions,
  matrixIds: matrixIds
};
var o = {
  attributions: '',
  url: url,
  layer: layer,
  matrixSet: matrixSet,
  format: format,
  projection: projection,
  tileGrid: new ol.tilegrid.WMTS(o_tileGrid),
  style: style,
  wrapX: true
};                
var source = new ol.source.WMTS(o);
var proxy = "http://proxy.example.../";      
source.set("olcs.proxy",proxy);

WMS图层的代理

6 个答案: