2
画像オーバーレイを含むマップボックスマップをプロットしようとしています。私は、URLを指定してコードを実行しようとするが、私はChromeでの.htmlを検査する場合には、エラーがスローされます。Mapbox - 地図上の画像 - URLから画像をインポートするとエラーが発生します
mapbox-gl.js:87 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at blob:null/28b7e67a-c552-4109-88b1-d8fefaff6ace may not be loaded.
at e._prepareImage (https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js:87:2682)
at e.prepare (https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js:87:2212)
at o.prepare (https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js:99:1982)
at Painter.renderPass (https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js:72:4748)
at Painter.render (https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js:72:4274)
at e._render (https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js:207:11604)
これはエラーを投げている私が実行しているコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia3Z5YiIsImEiOiJjaXUwMHEwcmgwMDAxMnlvM3NzMm0xbGozIn0.JL_eeNZL_lDoJxijNqFPoA';
var mapStyle = {
"version": 8,
"name": "Dark",
"sources": {
"mapbox": {
"type": "vector",
"url": "mapbox://mapbox.mapbox-streets-v6"
},
"overlay": {
"type": "image",
"url": "i.imgur.com/ciCbAHY.png",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
}
},
"sprite": "mapbox://sprites/mapbox/dark-v9",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {"background-color": "#111"}
},
{
"id": "water",
"source": "mapbox",
"source-layer": "water",
"type": "fill",
"paint": {"fill-color": "#2c2c2c"}
},
{
"id": "boundaries",
"source": "mapbox",
"source-layer": "admin",
"type": "line",
"paint": {"line-color": "#797979", "line-dasharray": [2, 2, 6, 2]},
"filter": ["all", ["==", "maritime", 0]]
},
{
"id": "overlay",
"source": "overlay",
"type": "raster",
"paint": {"raster-opacity": 0.85}
},
{
"id": "cities",
"source": "mapbox",
"source-layer": "place_label",
"type": "symbol",
"layout": {
"text-field": "{name_en}",
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
"text-size": {"stops": [[4, 9], [6, 12]]}
},
"paint": {
"text-color": "#969696",
"text-halo-width": 2,
"text-halo-color": "rgba(0, 0, 0, 0.85)"
}
},
{
"id": "states",
"source": "mapbox",
"source-layer": "state_label",
"type": "symbol",
"layout": {
"text-transform": "uppercase",
"text-field": "{name_en}",
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
"text-letter-spacing": 0.15,
"text-max-width": 7,
"text-size": {"stops": [[4, 10], [6, 14]]}
},
"filter": [">=", "area", 80000],
"paint": {
"text-color": "#969696",
"text-halo-width": 2,
"text-halo-color": "rgba(0, 0, 0, 0.85)"
}
}
]
};
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874],
style: mapStyle,
hash: false
});
</script>
</body>
</html>
私はしばらくの間、周りを検索し、広範囲に実験してきたが、しかし私は、溶液またはどこでも可能な回避策を見つけるように見えることはできません。私が知る限り、それはCORSエラーではありません。誰かが私が間違っていることを指摘できれば素晴らしいだろう。