当前位置：首页 > news >正文

源码分析之Leaflet中TileLayer

news 来源：原创 2025/5/21 5:49:12

概述

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。