首先需要去天地图开放平台注册账号创建应用获取应用密钥(tk)。下面是核心代码片段我封装为了tianditu.jsimport 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 ?SERVICEWMTSREQUESTGetTileVERSION1.0.0 LAYER${layer}STYLEdefaultTILEMATRIXSETwFORMATtiles 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, }, }) }加载成功效果如下图所示