Javascript OpenLayers 3和XYZ层
我有一张地图,我想展示一下。 它由一个标准地图(OSM、Google或Bing)和一个由Openseamap.org提供的图层组成。 此图层将生成接缝标记作为地图的图像。 这应该是这样的(或多或少,没有粉色屏幕): 我正在尝试将其传输到OpenLayers3 我使用的JavascriptCode是:Javascript OpenLayers 3和XYZ层,javascript,cors,openlayers-3,Javascript,Cors,Openlayers 3,我有一张地图,我想展示一下。 它由一个标准地图(OSM、Google或Bing)和一个由Openseamap.org提供的图层组成。 此图层将生成接缝标记作为地图的图像。 这应该是这样的(或多或少,没有粉色屏幕): 我正在尝试将其传输到OpenLayers3 我使用的JavascriptCode是: var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ so
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>
我有一个实验。虽然Firebug告诉我,当他们找不到作为图像的Seamark时,我似乎无法让SeamarkLayer正常工作,就像在屏幕上的粉色方块一样。问题是tiles.openseamap.org的CORS标题。 由于OpenLayers3的GitHub上的一些帮助,解决方案如下 来自
http://tiles.openseamap.org
是不兼容的。
两个选项:启用或切换到画布映射()对于我来说,通过删除null的引号可以解决问题:
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
crossOrigin: null
})
})]