Question

我正在尝试绘制带有图像叠加层的地图框图。我指定了网址并尝试运行代码，但是在我检查Chrome中的.html时会抛出错误：

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错误。如果有人能够指出我做错了什么就会很棒。

Answer 1

显然，它仍然是一个CORS问题。图像和脚本必须位于同一个域中，或者图像必须具有适当的CORS头。请记住，CORS错误并不总是会产生明确的CORS错误，但也会产生如上所述的错误。

Mapbox - 地图上的图像 - 从url导入图像会引发错误

1 个答案: