1

我提供了一个 URL，它在执行时会给我带来 cors 问题（访问被拒绝），如果通过 leafletJs 的 tilelayer 功能访问不会给我带来 cors 问题。只是想了解 tileLayer 的实现是如何完成的。

我知道当原点未列入白名单时会出现 cors 问题（访问被拒绝），但在这种情况下，tileLayer 也应该给我访问被拒绝的问题，但它能够在地图中加载图块。

我参考了下面的代码来理解实现，但找不到它如何以不同的方式处理 cors 问题。任何帮助表示赞赏。
https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js

4

1 回答 1

2

TL;DR：Leaflet 只操作 DOM，这样做永远不会引发 CORS 错误。

Leaflet 创建<img>DOM 元素，并将它们添加到 DOM。魔法开始发生在这行代码：

var tile = document.createElement('img');

然后设置src属性，使元素看起来像<img src='foo/x/y/z.png'>：

tile.src = this.getTileUrl(coords);

然后，通过这一行L.GridLayer将该元素添加<img>到 DOM的功能：

container.appendChild(tile);

然后有一点魔法将它定位<img>在一些容器元素中，使其保持在正确的位置，并在加载图像时重置其 CSS 类。

Leaflet 操作 DOM。Leaflet不做的是通过 javascript 访问图像信息。换句话说：传单不使用XmlHttpRequest也不fetch。

因此，代码在加载资源时不会抛出与 CORS 相关的错误，因为这只发生在通过XmlHttpRequestor请求资源时fetch。

但是，如果您尝试访问 JS 代码中的图像数据，您会发现 CORS 错误（通常这是通过canvas功能完成的，例如，请参阅L.TileLayer.GL尝试将加载的图块用作 WebGL 纹理）。但在基本情况下不会发生这种情况。

另请注意，如果加载失败（由于 HTTP 错误或其他原因） ，图像将触发error事件。反过来，这将使L.TileLayers 触发一个tileerror事件。如果您对查看磁贴加载错误感兴趣，您可能需要为此使用事件处理程序。

于 2018-01-16T09:29:46.457 回答