3

表示したい地図があります。Openseamap.org が提供する標準マップ (OSM、Google、または Bing) とレイヤーで構成されます。このレイヤーは、マップ用の画像としてシーマークを生成します。これは次のようになります (多かれ少なかれ、ピンク色の画面はありません)。 OpenLayers2 を使用した OpenSeaMap 画面

これを 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
    })
});

これは Map によって呼び出されます:

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

実験するJSFiddleがあります。ピンクの四角の画面のように、シーマークが画像として見つからない場合、Firebugは教えてくれますが、SeamarkLayerを機能させることができないようです。

4

2 に答える 2

3

問題は tiles.openseamap.org の CORS ヘッダーでした。OpenLayers3 の GitHub のヘルプのおかげで、解決策は次のとおりです。

からのリソースhttp://tiles.openseamap.orgはクロスオリジン互換性がありません。2 つのオプション:サーバー レベルでクロスオリジン リソース共有を有効にするか、キャンバス マップに切り替えます (更新された JSFiddle を参照) 。

于 2013-11-29T07:45:19.920 に答える
2

私にとって、問題はnullの引用符を削除することで解決されます:

    new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
            crossOrigin: null
        })
    })]
于 2017-01-17T15:08:44.543 に答える