Openlayers 2 + HERE切片缓存

时间:2019-02-11 08:52:05

标签: javascript cors maps cross-domain openlayers

我需要在Windows计算机上创建一个离线地图演示,并且唯一的选择是使用切片缓存,我使用的是Openlayers 2,当我初始化OSM层时,一切都按预期工作:

map = new OpenLayers.Map({
    layers: [
        new OpenLayers.Layer.OSM("OpenStreetMap (CORS)", null, {
            eventListeners: {
                tileloaded: updateStatus,
                loadend: detect
        }})
    ]
}

调用“ detect”方法,并检查是否可以为图块调用getCanvasContext()函数,并且一切正常! 当我使用XYZ图层将OSM替换为HERE映射时,它将停止工作:

var urlTpl = 'https://1.{base}.maps.cit.api.here.com' + '/{type}/2.1/maptile/newest/{scheme}/${z}/${x}/${y}/256/png' + '?app_id=?????&app_code=??????';

var hereLayer = {
  base: 'base',
  type: 'maptile',
  scheme: 'normal.day',
  app_id: platform['app_id'],
  app_code: platform['app_code']
};

map = new OpenLayers.Map({
    layers: [
        new OpenLayers.Layer.XYZ("HERE", [createUrl(urlTpl, hereLayer)], {
        eventListeners: {
                tileloaded: updateStatus,
                loadend: detect
            }
        })
    ]
}

在此示例中,确实调用了detect方法,但是这次函数getCanvasContext()抛出异常:

  

代码:18
  消息:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出污染的画布。
  名称:SecurityError

我该怎么办?

1 个答案:

答案 0 :(得分:1)

https://gis.stackexchange.com/questions/71715/enabling-cors-in-openlayers的答案开始:您需要在tileOptions选项中包含layers设置才能启用CORS:

map = new OpenLayers.Map({
    layers: [
    new OpenLayers.Layer.XYZ("HERE", [createUrl(urlTpl, hereLayer)], {
    tileOptions: {crossOriginKeyword: 'anonymous'},
    eventListeners: {
        tileloaded: updateStatus,
        loadend: detect
        }
    })
    ]
}