OpenLayers 3 和 XYZ 层答案

【问题标题】：OpenLayers 3 and XYZ LayerOpenLayers 3 和 XYZ 层
【发布时间】：2013-11-28 07:59:30
【问题描述】：

我有一张地图，我想展示它。它由一个标准地图（OSM、Google 或 Bing）和一个由 Openseamap.org 提供的图层组成。该图层生成海标作为地图的图像。这应该看起来像这样（或多或少，没有粉红色的屏幕）：

我正在尝试将其转移到 OpenLayers3。

我使用的JavascriptCode是：

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
                crossOrigin: 'null'
            })
        })],
    view: new ol.View2D({
        center: ol.proj.transform([12.1, 54.18], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
    })
});

被地图调用：

<div id="map" class="map"></div>

我有一个JSFiddle 可以试验。我只是似乎无法让 SeamarkLayer 工作，尽管 Firebug 告诉我，当他们没有找到作为图像的海标时，就像在屏幕上的粉红色方块一样。

【问题讨论】：

标签： javascript cors openlayers-3

【解决方案1】：

问题是tiles.openseamap.org 的CORS 标头。解决方法如下，感谢OpenLayers3的GitHub上的一些帮助！

来自http://tiles.openseamap.org 的资源不是跨域兼容的。两个选项：启用cross-origin resource sharing at the server level 或切换到画布地图（see updated JSFiddle）

【讨论】：

【解决方案2】：

对我来说，问题是通过删除 null 的引号来解决的：

    new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
            crossOrigin: null
        })
    })]

【讨论】：