OpenLayers 3 and XYZ Layer

问题:

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):

I am trying to transfer this to OpenLayers3.

The JavascriptCode I used is:

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

Which is called by the Map:

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

I have a JSFiddle to experiment with. I just can't seem to get the SeamarkLayer working, although Firebug tells me, when they don't find the seamarks as images, like in the screen with the pink square.

回答1:

The problem was the CORS header of tiles.openseamap.org. The solution is the following, thanks to some help on GitHub of the OpenLayers3!

The resource from http://tiles.openseamap.org are not cross-origin compatible. Two options: enable the cross-origin resource sharing at the server level or switch to a canvas map (see updated JSFiddle)

回答2:

To me, the problem is solved by removing the quotes of null:

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