OpenLayers 3和XYZ图层

问题描述

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

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。

I am trying to transfer this to OpenLayers3.

我使用的JavascriptCode是： / p>

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

地图调用：

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

我有一个来试验。我只是不能看到SeamarkLayer工作，虽然Firebug告诉我，当他们没有找到图像，如在粉红色方形的屏幕上的图像。

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.

推荐答案

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

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

来自 http：// tiles的资源。 openseamap.org 不是跨源兼容的。
两个选项：启用或切换到画布图（）

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)

这篇关于OpenLayers 3和XYZ图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！