前言
在网站或移动端等前端应用中，使用 Leaflet 地图库可以很方便地实现瓦片地图的加载，但是在使用中国地图服务时，我们需要使用 WMTS（Web Map Tile Service）协议下的服务提供商，而 Leaflet 库默认只支持 WMS（Web Map Service）协议下的服务。因此，我们需要使用一些第三方的插件来实现。
本文将介绍一款名为 @mladen/leaflet.tilelayer.wmts 的 npm 包，它可以让我们很方便地加载 WMTS 服务。
安装
首先，我们需要安装 Leaflet 和 @mladen/leaflet.tilelayer.wmts：
npm install leaflet @mladen/leaflet.tilelayer.wmts
然后，在你的代码中引入它们：
import L from 'leaflet';
import { TileLayerWMTS } from '@mladen/leaflet.tilelayer.wmts';使用
创建地图
首先，我们需要创建一个地图容器，并添加到页面上：
<div id="map" style="width: 100%; height: 500px;"></div>
然后，我们可以使用 Leaflet 的 Map 类来创建地图实例，并设置默认视图和缩放级别：
const map = L.map('map', {
center: [30, 120],
zoom: 5,
});添加图层
接下来，我们需要添加 WMTS 图层。我们可以使用 TileLayerWMTS 类来创建一个图层实例，并传入必要的参数：
-- -------------------- ---- ------- ----- -------- - ---- -- ---- ----- --- - ----------------------------------------------- -- ---- ------- ----------- ------------------- ----- ------- - - ------ ------------------ -- ---- ------- ------------ -- ---- ------ ---------- -- ---- -------------- --------------------- -- ------- ------------ -- ---- ------------- -- ------ -- ----- --------- - --- ------------------ ---------
我们还需要设置图层的最大、最小缩放级别，以及添加到地图中：
wmtsLayer.options.minZoom = 1; wmtsLayer.options.maxZoom = 18; wmtsLayer.addTo(map);
完整代码
下面是一份完整的示例代码，供参考：
-- -------------------- ---- -------
---- -------- ------------- ----- ------- --------------
------- --------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------------------
--------
----- --- - ------------ -
------- ---- -----
----- --
---
----- -------- - ----
----- --- - -----------------------------------------------
----- ------- - -
------ ------------------
------- ------------
------ ----------
-------------- ---------------------
------------ -- ---- -------------
--
----- --------- - --- ------------------ ---------
------------------------- - --
------------------------- - ---
---------------------
---------总结
@mladen/leaflet.tilelayer.wmts 是一款很好用的 Leaflet 插件，可以让我们很方便地加载 WMTS 服务。在使用时，我们需要传入必要的参数，比如 WMTS 服务地址和图层名称等。同时，也可以通过设置最大、最小缩放级别等来优化图层，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8d238a385564ab6e92