OpenLayers 3和XYZ Layer

Question

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

我正在尝试将其转移到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告诉我，当他们没有找到海象作为图像时，就像在粉红色方块的屏幕上一样。

Answer 1

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

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

Answer 2

对我来说，通过删除 null ：

的引号解决了这个问题

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