javascript - Openlayers 2 + HERE 切片缓存

Question

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

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

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

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
            }
        })
    ]
}

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

code: 18
message: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
name: SecurityError

我能做什么？

Answer 1

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

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