概述

TileLayer 是 Layer 的子类，继承自GridLayer基类，用于加载和显示瓦片地图。它提供了加载和显示瓦片地图的功能，支持自定义瓦片的 URL 格式和参数。

源码分析

源码实现

TileLayer的源码实现如下：

export var TileLayer = GridLayer.extend({options: {minZoom: 0, // 最小缩放级别maxZoom: 18, // 最大缩放级别subdomains: "abc", // 子域名，用于分散请求，绕过浏览器的并发限制errorTileUrl: "", // 错误瓦片的URL，加载失败时显示的备用图片URLzoomOffset: 0, // 缩放偏移量，调整请求中的z值tms: false,// 是否使用TMS格式，y轴反转zoomReverse: false, // 是否反转缩放级别detectRetina: false, // 是否检测视网膜显示，加载高分辨率瓦片crossOrigin: false, // 控制跨域请求referrerPolicy: false, // 防盗链策略},initialize: function (url, options) {this._url = url;options = Util.setOptions(this, options);if (options.detectRetina && Browser.retina && options.maxZoom > 0) {options.tileSize = Math.floor(options.tileSize / 2);if (!options.zoomReverse) {options.zoomOffset++;options.maxZoom = Math.max(options.minZoom, options.maxZoom - 1);} else {options.zoomOffset--;options.minZoom = Math.min(options.maxZoom, options.minZoom + 1);}options.minZoom = Math.max(0, options.minZoom);} else if (!options.zoomReverse) {options.maxZoom = Math.max(options.minZoom, options.maxZoom);} else {options.minZoom = Math.min(options.maxZoom, options.minZoom);}if (typeof options.subdomains === "string") {options.subdomains = options.subdomains.split("");}this.on("tileunload", this._onTileRemove);},setUrl: function (url, noRedraw) {if (this._url === url && noRedraw === undefined) {noRedraw = true;}this._url = url;if (!noRedraw) {this.redraw();}return this;},createTile: function (coords, done) {var tile = document.createElement("img");DomEvent.on(tile, "load", Util.bind(this._tileOnLoad, this, done, tile));DomEvent.on(tile, "error", Util.bind(this._tileOnError, this, done, tile));if (this.options.crossOrigin || this.options.crossOrigin === "") {tile.crossOrigin =this.options.crossOrigin === true ? "" : this.options.crossOrigin;}if (typeof this.options.referrerPolicy === "string") {tile.referrerPolicy = this.options.referrerPolicy;}tile.alt = "";tile.src = this.getTileUrl(coords);return tile;},getTileUrl: function (coords) {var data = {r: Browser.retina ? "@2x" : "",s: this._getSubdomain(coords),x: coords.x,y: coords.y,z: this._getZoomForUrl(),};if (this._map && !this._map.options.crs.infinite) {var invertedY = this._globalTileRange.max.y - coords.y;if (this.options.tms) {data["y"] = invertedY;}data["-y"] = invertedY;}return Util.template(this._url, Util.extend(data, this.options));},_tileOnLoad: function (done, tile) {if (Browser.ielt9) {setTimeout(Util.bind(done, this, null, tile), 0);} else {done(null, tile);}},_tileOnError: function (done, tile, e) {var errorUrl = this.options.errorTileUrl;if (errorUrl && tile.getAttribute("src") !== errorUrl) {tile.src = errorUrl;}done(e, tile);},_onTileRemove: function (e) {e.tile.onload = null;},_getZoomForUrl: function () {var zoom = this._tileZoom,maxZoom = this.options.maxZoom,zoomReverse = this.options.zoomReverse,zoomOffset = this.options.zoomOffset;if (zoomReverse) {zoom = maxZoom - zoom;}return zoom + zoomOffset;},_getSubdomain: function (tilePoint) {var index =Math.abs(tilePoint.x + tilePoint.y) % this.options.subdomains.length;return this.options.subdomains[index];},_abortLoading: function () {var i, tile;for (i in this._tiles) {if (this._tiles[i].coords.z !== this._tileZoom) {tile = this._tiles[i].el;tile.onload = Util.falseFn;tile.onerror = Util.falseFn;if (!tile.complete) {tile.src = Util.emptyImageUrl;var coords = this._tiles[i].coords;DomUtil.remove(tile);delete this._tiles[i];this.fire("tileabort", { tile, coords });}}}},_removeTile: function (key) {var tile = this._tiles[key];tile.el.setAttribute("src", Util.emptyImageUrl);return GridLayer.prototype._removeTile.call(this, key);},_tileReady: function (coords, err, tile) {if (!this._map ||(tile && tile.getAttribute("src") === Util.emptyImageUrl)) {return;}return GridLayer.prototype._tileReady.call(this, coords, err, tile);},
});export function tileLayer(url, options) {return new TileLayer(url, options);
}

源码解析

initialize方法

initialize方法用于初始化TileLayer对象，设置默认选项和事件监听器，保存URL末班

• this._url：存储瓦片图层的URL。
• options：用户提供的选项，用于覆盖默认选项。
• options.detectRetina：如果启用了视网膜检测，将瓦片大小减半，并调整缩放级别和偏移量。
• options.subdomains：如果是字符串，将其拆分为子域名数组。
• this.on("tileunload", this._onTileRemove)：监听tileunload事件，当瓦片被卸载时调

方法详解

setUrl(url,noRedraw):

• 更新URL模版，若URL未变化且noRedraw为true，则不重绘图层。
• 调用redraw()方法强制刷新，重新绘制图层。

createTile(coords,done):

• 创建一个新的HTML图片元素作为瓦片。
• 设置图片元素的load和error事件监听器，当图片加载完成或加载失败时调用done回调函数。
• 设置图片元素的crossOrigin属性，控制跨域请求。
• 设置图片元素的referrerPolicy属性，控制防盗链策略。
• 设置图片元素的alt属性为空字符串。
• 设置图片元素的src属性为getTileUrl(coords)方法返回的URL。
• 返回创建的图片元素。

getTileUrl(coords):

• 计算并返回URL模版，将URL中的占位符替换为实际的值。
• 占位符包括：
  • {r}：如果启用了视网膜检测，替换为@2x，否则为空字符串。
  • {s}：根据坐标计算子域名。
  • {x}：替换为X坐标。
  • {y}：替换为Y坐标。
  • {z}：替换为缩放级别。
  • {-y}：如果启用了TMS格式，替换为反转的Y坐标，否则为空字符串。
• 返回替换后的URL。

_tileOnLoad(done,tile):

• 当图片加载完成时调用done回调函数，IE9以下延迟触发。

_tileOnError(done,tile,e):

• 当图片加载失败时调用done回调函数，并设置错误信息。
• 如果启用了错误瓦片的URL，将图片元素的src属性设置为错误瓦片的URL，再次尝试加载。
• 返回错误信息。

_getZoomForUrl():

• 根据zoomReverse和zoomOffset选项计算缩放级别。
• 如果启用了zoomReverse，将缩放级别反转。
• 返回计算后的缩放级别。
  _getSubdomain(tilePoint):
• 根据X和Y坐标计算子域名。
• 使用subdomains选项中的子域名数组，根据X和Y坐标的绝对值取模计算索引。
• 返回计算得到的子域名。

瓦片管理

_abortLoading()：中止非当前缩放级别的瓦片加载

• 重置onload/onerror事件监听器，
• 将非当前缩放级别的瓦片的src属性设置为空字符串，并从_tiles对象中移除。

_removeTile(key):

• 从_tiles对象中移除指定键的瓦片。
• 将瓦片的src属性设置为空字符串，取消网络请求。
• 调用父类的_removeTile方法，移除瓦片元素。

_tileReady(coords,err,tile):

• 当瓦片准备就绪时调用。
• 如果URL为空字符串或_map不存在，返回。
• 调用父类的_tileReady方法，处理瓦片就绪事件。

关键逻辑

​​- Retina适配​​：通过detectRetina自动调整瓦片尺寸和缩放，加载高分辨率图片。

• 子域名轮询​​：分散请求，避免浏览器并发限制。
• ​TMS坐标反转​​：通过tms: true适配不同的瓦片服务标准。
• 跨域处理​​：通过crossOrigin属性解决CORS问题，访问像素数据。
• 错误恢复​​：加载失败时显示errorTileUrl，提升用户体验

总结

TileLayer是Leaflet中用于加载和显示瓦片地图的核心组件，通过继承GridLayer基类，实现了瓦片的加载和管理，支持自定义URL格式和参数，提供了丰富的功能和选项，适用于各种瓦片地图服务。