OpenLayers 3 和 XYZ 层

I have a map, which I want to display. It consists of a standard map (OSM, Google or Bing) and a layer, provided by Openseamap.org. This layers produces seamarks as images for a map. This should look like this (more or less, without the pink screen):

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

我使用的Javascript代码是：

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 http://jsfiddle.net/J2KBC/进行实验。我似乎无法让 SeamarkLayer 工作，尽管 Firebug 告诉我，当他们找不到图像形式的海标时，就像屏幕上有粉红色方块一样。

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

资源来自http://tiles.openseamap.org不跨域兼容。 两个选项：启用服务器级别的跨域资源共享 http://enable-cors.org/或切换到画布地图（查看更新的 JSFiddle http://jsfiddle.net/J2KBC/1/)