<think>我们正在使用
天地图（
Tianditu）服务，并希望在Web应用中实现地图图层的
加载和切
换功能。根据引用[3]中的示例，我们可以使用SuperMap的iClient for Leaflet库来
加载天地图图层，并实现图层切
换。
主要步骤：
1. 引入必要的库（如Leaflet和SuperMap的iClient-Leaflet）。
2. 创建地图实例。
3. 定义不同的
天地图图层（例如矢量
底图、影像
底图等）。
4. 将其中一个图层设置为
默认图层并添加到地图。
5. 实现图层切
换功能，可以通过按钮点击或其他交互方式来切
换地图图层。
注意：使用
天地图需要申请密钥（tk），并在请求中使用。
下面是一个简化的示例，展示如何
加载天地图矢量
底图和影像
底图，并实现切
换功能。
首先，在HTML中引入Leaflet和SuperMap iClient-Leaflet库（注意：引用[3]使用的是Classic方式，但这里我们使用Leaflet方式，因为引用[2]提到使用Leaflet插件）：
注意：引用[3]中的示例是使用SuperMap Classic，但根据用户需求，我们更倾向于使用Leaflet，因为引用[2]中提到了Leaflet。因此，我们将采用Leaflet的方式。
但是，请注意，引用[3]中使用了`SuperMap.Map`等，这是Classic API。而引用[2]中使用了`@supermap/iclient-leaflet`，这是Leaflet的插件。因此，我们使用Leaflet的方式。
由于我们使用Leaflet，所以先确保引入了Leaflet的CSS和JS，以及SuperMap的iClient-Leaflet。
以下是代码示例：
HTML部分：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
天地图图层切
换</title>
<!-- 引入Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map { height: 100vh; }
.layer-switcher {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
background: white;
padding: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="layer-switcher">
<button id="vecLayer">矢量
底图</button>
<button id="imgLayer">影像
底图</button>
</div>
<!-- 引入Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<!-- 引入SuperMap iClient-Leaflet -->
<script src="https://iclient.supermap.io/web/libs/iclient-leaflet/9.1.2/iclient-leaflet.js"></script>
<script>
//
天地图服务地址，需要替
换成你自己的密钥（tk）
const tk = "你的
天地图密钥";
// 初始化地图
var map = L.map('map', {
center: [29, 113], // 初始中心点
zoom: 10 // 初始缩放级别
});
// 定义图层
// 矢量
底图
var vecLayer = L.supermap.
tiandituTileLayer({
layerType: 'vec',
key: tk
});
// 矢量注记
var vecAnnoLayer = L.supermap.
tiandituTileLayer({
layerType: 'vec_anno',
key: tk
});
// 影像
底图
var imgLayer = L.supermap.
tiandituTileLayer({
layerType: 'img',
key: tk
});
// 影像注记
var imgAnnoLayer = L.supermap.
tiandituTileLayer({
layerType: 'img_anno',
key: tk
});
//
默认加载矢量
底图和矢量注记
var currentBaseLayer = vecLayer;
var currentAnnoLayer = vecAnnoLayer;
map.addLayer(currentBaseLayer);
map.addLayer(currentAnnoLayer);
// 图层切
换函数
function switchLayer(baseLayer, annoLayer) {
// 移除当前
底图和注记
map.removeLayer(currentBaseLayer);
map.removeLayer(currentAnnoLayer);
// 添加新的
底图和注记
map.addLayer(baseLayer);
map.addLayer(annoLayer);
// 更新当前图层
currentBaseLayer = baseLayer;
currentAnnoLayer = annoLayer;
}
// 绑定按钮事件
document.getElementById('vecLayer').addEventListener('click', function() {
switchLayer(vecLayer, vecAnnoLayer);
});
document.getElementById('imgLayer').addEventListener('click', function() {
switchLayer(imgLayer, imgAnnoLayer);
});
</script>
</body>
</html>
```
说明：
1. 我们使用`L.supermap.
tiandituTileLayer`来创建
天地图图层，其中`layerType`指定图层类型（矢量
底图'vec'，矢量注记'vec_anno'，影像
底图'img'，影像注记'img_anno'）。
2. 注：
天地图需要
底图和注记两个图层叠加显示，因此我们分别创建
底图图层和注记图层。
3.
默认加载矢量
底图和矢量注记。
4. 通过两个按钮实现切
换：点击“矢量
底图”按钮切
换到矢量图层，点击“影像
底图”按钮切
换到影像图层。
注意：请将代码中的`tk`替
换为你自己在
天地图官网申请的密钥。
此示例中，我们使用了SuperMap iClient-Leaflet库中提供的
天地图图层接口，这样可以简化调用。如果没有SuperMap库，也可以直接使用Leaflet的TileLayer来
加载，但需要自己构造URL。
如果不想使用SuperMap的库，也可以使用纯Leaflet的方式
加载天地图：
```javascript
// 矢量
底图
var vecLayer = L.tileLayer('https://t0.
tianditu.gov.cn/vec_w/wmts?tk={tk}&layer=vec&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
tk: tk
});
// 矢量注记
var vecAnnoLayer = L.tileLayer('https://t0.
tianditu.gov.cn/cva_w/wmts?tk={tk}&layer=cva&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
tk: tk
});
```
但注意，WMTS服务的URL参数可能有所不同，需要根据
天地图提供的WMTS服务文档来调整。
由于我们使用了SuperMap的封装，它已经帮我们处理好了这些参数，所以使用`L.supermap.
tiandituTileLayer`更加方便。
以上代码实现了
天地图的
默认加载和切
换功能。
另外，引用[1]中提到在vue2/nuxt2项目中实现，如果是在Vue项目中，可以将上述逻辑封装成Vue组件。
注意：在Vue项目中，需要确保在mounted生命周期中初始化地图，同时注意DOM元素的
加载。
最后，关于引用[1]中提到的“解决切
换卫星视图报错、渲染
加载慢卡顿、地图只显示一半卫星图层等问题”，可能的原因和解决方案：
- 报错：可能是密钥无效或URL错误，检查密钥和URL。
- 渲染
加载慢卡顿：可以考虑使用地图容器的预
加载，或者检查网络。
- 地图只显示一半：可能是地图容器大小变化后没有调用map的invalidateSize方法，可以在切
换后或窗口变化时调用`map.invalidateSize()`。
在切
换图层的函数中，如果遇到显示问题，可以在切
换完成后调用`map.invalidateSize()`。
修改切
换函数：
```javascript
function switchLayer(baseLayer, annoLayer) {
map.removeLayer(currentBaseLayer);
map.removeLayer(currentAnnoLayer);
map.addLayer(baseLayer);
map.addLayer(annoLayer);
currentBaseLayer = baseLayer;
currentAnnoLayer = annoLayer;
// 解决地图显示不全的问题
setTimeout(() => {
map.invalidateSize();
}, 0);
}
```
以上内容实现了在
天地图中设置
默认地图并实现地图切
换功能。</think>在
天地图中设置
默认地图并实现地图切
换功能，可以通过以下步骤实现：
### 一、设置
默认地图
1. **初始化地图时指定
默认图层**
使用
天地图的WMTS服务
加载矢量图作为
默认底图：
```javascript
// 创建地图实例
const map = new L.Map('map', {
center: [39.92, 116.46], //
默认中心点（北京）
zoom: 10 //
默认缩放级别
});
//
加载默认矢量
底图（需替
换your_
tianditu_token）
const defaultLayer = L.tileLayer('https://t{0-7}.
tianditu.gov.cn/vec_w/wmts?tk=YOUR_
TIANDITU_TOKEN&', {
layer: 'vec',
tilematrixSet: 'w',
format: 'tiles',
maxZoom: 18
}).addTo(map);
```
### 二、实现图层切
换功能
1. **准备不同图层源**
```javascript
// 矢量图层
const vectorLayer = L.tileLayer('https://t{0-7}.
tianditu.gov.cn/vec_w/wmts?tk=YOUR_TOKEN&', {
layer: 'vec',
tilematrixSet: 'w'
});
// 卫星图层
const satelliteLayer = L.tileLayer('https://t{0-7}.
tianditu.gov.cn/img_w/wmts?tk=YOUR_TOKEN&', {
layer: 'img',
tilematrixSet: 'w'
});
// 地形图层
const terrainLayer = L.tileLayer('https://t{0-7}.
tianditu.gov.cn/ter_w/wmts?tk=YOUR_TOKEN&', {
layer: 'ter',
tilematrixSet: 'w'
});
```
2. **创建图层切
换控件**
```javascript
// 方法1：使用Leaflet内置控件
const baseLayers = {
"矢量地图": vectorLayer,
"卫星影像": satelliteLayer,
"地形图": terrainLayer
};
L.control.layers(baseLayers).addTo(map);
// 方法2：自定义切
换按钮
document.getElementById('satellite-btn').addEventListener('click', () => {
map.removeLayer(vectorLayer);
map.addLayer(satelliteLayer);
});
```
### 三、关键注意事项
1. **解决常见问题**：
- **密钥申请**：需在[
天地图官网](https://www.
tianditu.gov.cn/)申请token替
换`YOUR_TOKEN`
- **跨域问题**：在服务端配置CORS或使用代理
- **图层偏移**：确保所有图层使用相同的`tilematrixSet`参数（推荐`w`）
- **渲染卡顿**：使用`{0-7}`域名轮询避免单域名限制
2. **性能优化**：
```javascript
// 预
加载图层
satelliteLayer.on('load', initComplete);
// 单图层切
换（避免重叠）
function switchLayer(newLayer) {
map.eachLayer(layer => {
if (layer instanceof L.TileLayer) map.removeLayer(layer);
});
map.addLayer(newLayer);
}
```
### 四、完整示例（Vue组件）
```vue
<template>
<div>
<div id="map-container"></div>
<div class="layer-control">
<button @click="switchLayer('vector')">矢量图</button>
<button @click="switchLayer('satellite')">卫星图</button>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = L.map('map-container').setView([39.92, 116.46], 10);
// 初始化
默认图层
this.vectorLayer = L.tileLayer(
'https://t{0-7}.
tianditu.gov.cn/vec_w/wmts?tk=YOUR_TOKEN&',
{ tilematrixSet: 'w' }
).addTo(this.map);
},
switchLayer(type) {
if (type === 'vector' && !this.map.hasLayer(this.vectorLayer)) {
this.map.removeLayer(this.satelliteLayer);
this.map.addLayer(this.vectorLayer);
} else if (type === 'satellite') {
if (!this.satelliteLayer) {
this.satelliteLayer = L.tileLayer(
'https://t{0-7}.
tianditu.gov.cn/img_w/wmts?tk=YOUR_TOKEN&',
{ tilematrixSet: 'w' }
);
}
this.map.removeLayer(this.vectorLayer);
this.map.addLayer(this.satelliteLayer);
}
}
}
}
</script>
```
> **重要提示**：
> 1. 实际使用需替
换有效的
天地图token
> 2. 卫星图层
加载较慢时可添加
加载动画
> 3. 不同图层使用相同的坐标系和缩放级别可避免视角跳变
> 4. 最新API文档参考[
天地图服务接口](https://lbs.
tianditu.gov.cn/server/MapService.html)
博客介绍了设置加载默认地图类型的方法，需搭配对应地图类型标注，更改截图上四个地方，还列举了多种地图类型及注记代码，强调添加秘钥否则地图不显示，并给出效果图。
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
