首先需要去天地图开放平台，注册账号，创建应用，获取应用密钥(tk)。

下面是核心代码片段，我封装为了tianditu.js

import Basemap from '@arcgis/core/Basemap.js' import Map from '@arcgis/core/Map.js' import MapView from '@arcgis/core/views/MapView.js' import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js' /** 天地图子域，用于分摊瓦片请求。对应 URL 里的 `{subDomain}`。 */ const SUB_DOMAINS = ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'] /** 默认地图中心，经纬度：[经度, 纬度]，这里是北京。 */ const DEFAULT_CENTER = [116.4, 39.9] /** 默认缩放级别，1 最远、18 最近。 */ const DEFAULT_ZOOM = 10 /** * 创建一张天地图 WMTS 瓦片图层（Web 墨卡托，`*_w`）。 * * @param {string} layer 图层标识。`img` 为影像，`cia` 为影像注记；矢量一般用 `vec` / `cva`。 * @param {string} key 天地图开发者密钥（tk），在 https://console.tianditu.gov.cn/ 申请。 * @param {string} copyright 版权说明，会显示在地图左下角归属栏。 * @returns {import('@arcgis/core/layers/WebTileLayer.js').default} ArcGIS WebTileLayer 实例。 */ function createWmtsLayer(layer, key, copyright) { return new WebTileLayer({ urlTemplate: `https://{subDomain}.tianditu.gov.cn/${layer}_w/wmts` + '?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' + `&LAYER=${layer}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles` + `&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${key}`, subDomains: SUB_DOMAINS, copyright, }) } /** * 创建天地图影像底图：底层影像 + 叠加中文注记。 * * @param {string} token 天地图 tk。首尾空格会被去掉；空值会抛错。 * @returns {import('@arcgis/core/Basemap.js').default} 可供 `Map.basemap` 使用的底图。 * @throws {Error} 未传入 tk 时抛出「缺少天地图 tk」。 */ export function createTiandituBasemap(token) { const key = token?.trim() if (!key) { throw new Error('缺少天地图 tk') } return new Basemap({ baseLayers: [createWmtsLayer('img', key, '天地图影像')], referenceLayers: [createWmtsLayer('cia', key, '天地图影像注记')], title: '天地图影像', }) } /** * 在指定 DOM 容器里创建 2D 地图视图。 * 返回的 MapView 不要放进 Vue 的 `ref` / `reactive`，否则 Esri Accessor 会被 Proxy 破坏。 * * @param {HTMLElement} container 地图挂载节点，一般是组件里 `ref` 对应的 DOM。 * @param {object} [options] 可选配置。 * @param {string} options.token 天地图 tk，会传给 {@link createTiandituBasemap}。 * @param {number[]} [options.center] 初始中心点 `[经度, 纬度]`，默认北京。 * @param {number} [options.zoom] 初始缩放级别，默认 `10`。 * @returns {import('@arcgis/core/views/MapView.js').default} MapView 实例，卸载页面时请调用 `destroy()`。 */ export function createTiandituView(container, options = {}) { const { token, center = DEFAULT_CENTER, zoom = DEFAULT_ZOOM } = options return new MapView({ container, map: new Map({ basemap: createTiandituBasemap(token), }), center, zoom, constraints: { minZoom: 1, maxZoom: 18, }, }) }

加载成功效果如下图所示：