如何使用JavaScript切换天地图为卫星图层？

Question

**如何使用JavaScript切换天地图为卫星图层？** 在WebGIS开发中，天地图（Tianditu）作为国内常用的地理信息服务，常与OpenLayers或Leaflet等地图库结合使用。开发者常常需要实现图层切换功能，例如从普通地图切换到卫星影像图层。 天地图提供多种图层类型，包括矢量地图（vec）、影像地图（img）和地形图（ter）。其中，卫星图层通常对应`img`图层。通过JavaScript动态修改图层的URL参数或图层名称，即可实现图层切换。 常见做法是：初始化地图时创建多个天地图图层，或动态更新现有图层的源配置。需要注意跨域限制、图层顺序及服务授权等问题。

Answer 1

一、天地图图层简介与JavaScript切换原理

天地图（Tianditu）是中国国家测绘局提供的地理信息服务，支持多种图层类型。常见的图层包括：

• vec：矢量地图图层，用于显示街道、行政区划等矢量信息。
• img：影像地图图层，即卫星图像，常用于遥感展示。
• ter：地形图层，结合高程数据展示地貌特征。

在WebGIS开发中，通过JavaScript动态修改请求URL中的图层参数（如 layer=img），即可实现图层切换。通常使用OpenLayers或Leaflet作为前端地图库来集成这些服务。

二、使用OpenLayers切换天地图为卫星图层

OpenLayers 是一个功能强大的开源地图库，适合处理复杂的地图交互逻辑。下面是一个示例代码，展示如何切换到卫星图层：

// 初始化天地图图层
function createTiandituLayer(layerType) {
  return new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=' + layerType + '&x={x}&y={y}&z={z}',
      attributions: '© 天地图'
    })
  });
}

// 创建地图实例
const map = new ol.Map({
  target: 'map',
  layers: [
    createTiandituLayer(1) // 默认是矢量图层（1对应vec）
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([116.397428, 39.90923]),
    zoom: 10
  })
});

// 切换图层函数
function switchToSatellite() {
  map.getLayers().clear();
  map.addLayer(createTiandituLayer(2)); // 2对应影像图层（img）
}

1. 初始化时加载默认图层（如矢量图）。
2. 定义切换函数，清空现有图层并添加新的图层配置。
3. 通过按钮绑定该函数实现用户交互。

三、使用Leaflet切换天地图为卫星图层

Leaflet 相比 OpenLayers 更加轻量，适合快速构建地图应用。以下是 Leaflet 实现图层切换的示例：

图层类型	Tile Layer URL 参数
矢量图层 (vec)	style=1
影像图层 (img)	style=2
地形图层 (ter)	style=5

// 初始化地图
const map = L.map('map').setView([39.90923, 116.397428], 10);

// 创建天地图图层
function createTiandituLayer(style) {
  return L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=' + style + '&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    attribution: '© 天地图'
  });
}

// 添加默认图层
const vecLayer = createTiandituLayer(1);
vecLayer.addTo(map);

// 切换到卫星图层
function switchToSatellite() {
  map.removeLayer(vecLayer);
  const imgLayer = createTiandituLayer(2);
  imgLayer.addTo(map);
}

四、注意事项与常见问题

1. 跨域限制：部分浏览器可能因CORS策略阻止访问天地图资源，建议后端设置代理或使用CDN中转。
2. 图层顺序：多图层叠加时注意层级控制，避免被覆盖。
3. 授权与配额：公开API可能存在调用频率限制，商业项目应申请正式授权。
4. 性能优化：大量图层切换可能导致重绘延迟，可采用缓存机制或懒加载策略。

graph TD A[用户点击切换按钮] --> B{判断目标图层类型} B -->|矢量图| C[加载vec图层] B -->|卫星图| D[加载img图层] B -->|地形图| E[加载ter图层] D --> F[更新地图视图]