Leaflet API - TileLayer 中文文档

发布时间: 2022-10-08 所属分类: 文章标签:

当前位置：

麻辣GIS » GIS手册 » Leaflet中文API手册（V1.9） » Leaflet API - TileLayer 中文文档

本文介绍下 Leaflet 中 TileLayer API的详细使用说明。

TileLayer API 调用方法

用于在地图上加载和显示瓦片图层。请注意，大多数tile服务器都需要属性，你可以在 Layer 下进行设置。扩展 GridLayer

使用示例

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

URL 模板

表现为以下方式:

'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'

{s} 是指可用的子域之一（按顺序使用，以帮助解决每个域的浏览器并行请求限制；子域值在选项中指定;默认为 a, b 或 c , 可以省略), {z} — 缩放级别, {x} 和 {y} — 瓦片坐标。 {r} 可以用来在URL中添加 "@2x" 以加载视网膜瓦片。

您可以在模板中使用自定义键，这些键将通过 TileLayer 选项进行 evaluated ，如下所示：

L.tileLayer('https://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

Creation

Extension methods 扩展方法

构造函数	说明
`L.tilelayer(<String> urlTemplate, <TileLayer options> options?)`	指定 `URL 模板`和可选的 options 对象，实例化一个瓦片图层对象。

Options 选项

选项	类型	默认值	说明
`minZoom`	`Number`	`0`	此图层将显示的最小缩放级别（包括最小）
`maxZoom`	`Number`	`18`	此图层将显示的最大缩放级别（包括最大）
`subdomains`	`String\|String[]`	`'abc'`	瓦片服务的子域。可以以一个字符串（其中每个字母是一个子域名）或字符串数组的形式传递。
`errorTileUrl`	`String`	`''`	显示瓦片图像的 URL，以代替加载失败的瓦片。
`zoomOffset`	`Number`	`0`	平铺 URL 中使用的缩放数字将与此值发生偏移。
`tms`	`Boolean`	`false`	如果为 `true`，则反转瓦片的 Y 轴编号 (为 TMS 服务启用此选项)。
`zoomReverse`	`Boolean`	`false`	如果设置为 true，则图块 URL 中使用的缩放数字将被反转 (`maxZoom - zoom` 而不是 `zoom`)
`detectRetina`	`Boolean`	`false`	如果 `true` 并且用户在视网膜显示器上，它将请求四个指定大小一半的瓦片和更大的缩放级别，以使用高分辨率。
`crossOrigin`	`Boolean\|String`	`false`	是否将 crossOrigin 属性添加到瓦片中。如果提供了字符串，则所有瓦片的 crossOrigin 属性都将设置为提供的字符串。如果您想访问平铺像素数据，则需要这样做。有关有效的字符串值，请参阅 CORS 设置。
`referrerPolicy`	`Boolean\|String`	`false`	是否将referrerPolicy 属性添加到图块中。如果提供了字符串，则所有图块都将其 referrerPolicy 属性设置为提供的字符串。如果您的地图的渲染上下文具有严格的默认值，但您的图块提供者需要有效的引用者，则可能需要这样做（例如，验证 API 令牌）。请参考 HTMLImageElement.referrerPolicy 了解有效的字符串值。

继承自 GridLayer 的选项

选项	类型	默认值	说明
`tileSize`	`Number\|Point`	`256`	网格中瓦片的宽度和高度。如果宽度和高度相等，则使用当前数字，否则使用 `L.point(width, height)` 。
`opacity`	`Number`	`1.0`	瓦片的不透明度。可以在 `createTile()` 函数中使用。
`updateWhenIdle`	`Boolean`	`(depends)`	在移动浏览器上默认为 `true` ，以避免过多的请求并保持流畅的导航。否则为 `false` 以便在平移过程中显示新瓦片，因为在桌面浏览器中很容易在 `keepBuffer` 选项之外平移。
`updateWhenZooming`	`Boolean`	`true`	默认情况下，平滑缩放动画 (在触摸缩放或 `flyTo()`期间) 将每隔一个整数的缩放级别更新网格图层。把这个选项设置为 `false` ，将只在平滑动画结束时更新网格图层。
`updateInterval`	`Number`	`200`	在平移时，瓦片将会在 `updateInterval` 毫秒内最多只更新一次。
`zIndex`	`Number`	`1`	瓦片图层的显性 zIndex。
`bounds`	`LatLngBounds`	`undefined`	如果设置，瓦片将只在设置的 `LatLngBounds` 内被加载。
`maxNativeZoom`	`Number`	`undefined`	瓦片源可用的最大缩放数。如果指定，所有缩放级别高于 `maxNativeZoom` 的图块将根据 `maxNativeZoom` 的缩放级别进行加载并自动缩放。
`minNativeZoom`	`Number`	`undefined`	瓦片源可用的最小缩放数。如果指定，所有缩放级别小于 `minNativeZoom` 的图块将根据 `minNativeZoom` 的缩放级别进行加载并自动缩放。
`noWrap`	`Boolean`	`false`	该图层是否被包裹在逆子午线周围。如果为 `true`，则 GridLayer 将只在低缩放级别下显示一次。当 map CRS 不环绕时无效。可与 `bounds` 结合使用以防止请求超出 CRS 限制的图块。
`pane`	`String`	`'tilePane'`	将添加到网格图层的`Map pane`
`className`	`String`	`''`	为瓦片图层指定的自定义类名。默认是空的。
`keepBuffer`	`Number`	`2`	平移地图时，在卸载之前保留这么多行和列的图块。

继承自 Layer 图层的选项

选项	类型	默认值	说明
`attribution`	`String`	`null`	归属控制中要显示的字符串，例如 "© OpenStreetMap 贡献者"。它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。

Events 事件

Extension methods 扩展方法

事件	数据	说明
`tileabort`	`TileEvent`	当瓦片正在加载但现在不需要时触发。

继承自 GridLayer 的事件

事件	数据	说明
`loading`	`Event`	当网格图层开始加载瓦片时触发。
`tileunload`	`TileEvent`	当瓦片被移除时触发（例如，当瓦片离开屏幕时）。
`tileloadstart`	`TileEvent`	当请求瓦片并开始加载时触发。
`tileerror`	`TileErrorEvent`	当加载瓦片出现错误时触发。
`tileload`	`TileEvent`	当瓦片加载时触发。
`load`	`Event`	当网格图层加载所有可见瓦片时触发。

继承自 Layer 图层的事件

事件	数据	说明
`add`	`Event`	在图层添加到地图后触发
`remove`	`Event`	从地图中移除图层后触发

继承自 Layer 的弹出（Popup）事件

事件	数据	说明
`popupopen`	`PopupEvent`	当绑定到该层的 popup 打开时触发
`popupclose`	`PopupEvent`	当绑定到该层的 popup 关闭时触发

继承自 Layer 图层的工具提示（Tooltip）事件

事件	数据	说明
`tooltipopen`	`TooltipEvent`	当绑定到该层的 tooltip 打开时触发。
`tooltipclose`	`TooltipEvent`	当绑定到该层的 tooltip 关闭时触发。

Methods 方法

方法	返回值	说明
`setUrl(<String> url, <Boolean> noRedraw?)`	`this`	更新图层的 URL 模板并重绘它 (除非 `noRedraw` 设置为 `true`)。如果 URL 不变，则除非将 noRedraw 参数设置为 false，否则不会重绘图层。
`createTile(<Object> coords, <Function> done?)`	`HTMLElement`	仅在内部调用，覆盖 GridLayer 的 `createTile()` 以返回带有给定`坐标`的适当图像 URL 的 `<img>` HTML 元素。已加载磁贴时调用 `done` 回调。

Extension methods 扩展方法

扩展 TileLayer 的图层可能会重新实现以下方法。

方法	返回值	说明
`getTileUrl(<Object> coords)`	`String`	仅在内部调用，返回给定坐标的瓦片的 URL。扩展 `TileLayer` 的类可以重写此函数以提供自定义的 tile URL 命名方案。

继承自 GridLayer 的方法

方法	返回值	说明
`bringToFront()`	`this`	将瓦片图层置于所有瓦片图层的顶部。
`bringToBack()`	`this`	将瓦片图层置于所有瓦片图层的底部。
`getContainer()`	`HTMLElement`	返回包含该图层的瓦片的 HTML 元素。
`setOpacity(<Number> opacity)`	`this`	改变网格图层的 opacity 。
`setZIndex(<Number> zIndex)`	`this`	改变网格图层的 zIndex 。
`isLoading()`	`Boolean`	如果网格图层中的任何瓦片没有完成加载，则返回 `true` 。
`redraw()`	`this`	清除该图层的所有瓦片，并再次请求它们。
`getTileSize()`	`Point`	将 tileSize option 规范化为一个点。由 `createTile()` 方法使用。

继承自 Layer 图层的方法

方法	返回值	说明
`addTo(<Map\|LayerGroup> map)`	`this`	将图层添加到指定的地图或图层组（LayerGroup）。
`remove()`	`this`	从当前处于活动状态的地图中删除图层。
`removeFrom(<Map> map)`	`this`	从指定的地图中删除图层
`removeFrom(<LayerGroup> group)`	`this`	从指定的 `LayerGroup` 中删除该图层。
`getPane(<String> name?)`	`HTMLElement`	返回代表地图上指定窗格的 `HTMLElement`。如果 `name` 被省略，则返回该层的窗格。
`getAttribution()`	`String`	由 `attribution 控件`使用，返回 attribution 选项。

继承自 Layer 图层的 Popup 方法

方法	返回值	说明
`bindPopup(<String\|HTMLElement\|Function\|Popup> content, <Popup options> options?)`	`this`	将一个弹出式窗口与传入的 `content` 层绑定，并设置必要的事件监听器。如果 `Function` 被传递，它将接收图层作为第一个参数，并应返回 `String` 或 `HTMLElement`。
`unbindPopup()`	`this`	移除之前用 `bindPopup` 绑定的弹出窗口。
`openPopup(<LatLng> latlng?)`	`this`	在指定的 `latlng` 处打开绑定的弹出窗口，如果没有设置 `latlng`，则在默认的位置打开弹窗（popup）。
`closePopup()`	`this`	如果与当前图层绑定的弹窗（popup）时打开的，则关闭当前弹窗。
`togglePopup()`	`this`	根据当前状态，打开或关闭与该层绑定的弹出窗口。
`isPopupOpen()`	`boolean`	如果与该层绑定的弹出窗口当前已打开，则返回 `true`。
`setPopupContent(<String\|HTMLElement\|Popup> content)`	`this`	设置绑定到该图层的弹出窗口的内容。
`getPopup()`	`Popup`	返回绑定到该图层的弹出窗口。

继承自 Layer 图层的 Tooltip 方法

方法	返回值	说明
`bindTooltip(<String\|HTMLElement\|Function\|Tooltip> content, <Tooltip options> options?)`	`this`	将工具提示（tooltip）绑定到传入的图层 `content` 并设置必要的事件侦听器。如果一个 `Function` 被传递，它将接收图层作为第一个参数，并应返回 `String` 或 `HTMLElement`。
`unbindTooltip()`	`this`	移除之前用 `bindTooltip` 绑定的工具提示（tooltip）。
`openTooltip(<LatLng> latlng?)`	`this`	在指定的 `latlng` 处打开绑定的工具提示（tooltip），如果没有指定 `latlng`，则在默认的锚点打开工具提示（tooltip）。
`closeTooltip()`	`this`	如果该图层处于打开状态，则关闭绑定到该图层的工具提示。
`toggleTooltip()`	`this`	根据当前状态打开或关闭绑定到该图层的工具提示。
`isTooltipOpen()`	`boolean`	如果该层绑定的工具提示当前已打开，则返回 `true`。
`setTooltipContent(<String\|HTMLElement\|Tooltip> content)`	`this`	设置绑定到该层的工具提示的内容。
`getTooltip()`	`Tooltip`	返回绑定到该层的工具提示。

继承自 Evented 的方法

方法	返回值	说明
`on(<String> type, <Function> fn, <Object> context?)`	`this`	为对象的特定事件类型添加一个监听函数（`fn`）。你可以选择性地指定监听器的上下文（这个关键字将指向的对象）。你也可以传递几个空格分隔的类型（例如，`'click dblclick'`）。
`on(<Object> eventMap)`	`this`	添加一组 type/listener，例如 `{click: onClick, mousemove: onMouseMove}`。
`off(<String> type, <Function> fn?, <Object> context?)`	`this`	移除一个先前添加的监听器函数。如果没有指定函数，它将从对象中删除该特定事件的所有监听器。请注意，如果您向 `on` 传递了一个自定义的上下文，您必须向 `off` 传递相同的上下文，以便删除监听器。
`off(<Object> eventMap)`	`this`	删除一组 type/listener
`off()`	`this`	移除该对象上所有事件的所有监听器。这包括隐含的附加事件。
`fire(<String> type, <Object> data?, <Boolean> propagate?)`	`this`	触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性，事件可以选择性地传播到事件父级。
`listens(<String> type, <Boolean> propagate?)`	`Boolean`	如果一个特定的事件类型有任何监听器连接到它，则返回 `true`。验证可以选择性地被传播，如果父级有监听器连接到它，它将返回`true`。
`once(…)`	`this`	与`on(...)`的行为一样，不过监听器只会被触发一次后然后被删除。
`addEventParent(<Evented> obj)`	`this`	向父级 `Evented` 添加事件
`removeEventParent(<Evented> obj)`	`this`	删除之前向父级 `Evented` 添加的事件
`addEventListener(…)`	`this`	同 `on(…)`
`removeEventListener(…)`	`this`	同 `off(…)`
`clearAllEventListeners(…)`	`this`	同 `off()`
`addOneTimeEventListener(…)`	`this`	同 `once(…)`
`fireEvent(…)`	`this`	同 `fire(…)`
`hasEventListeners(…)`	`Boolean`	同 `listens(…)`