maplibre-gl加载天地图影像

要在 MapLibre GL 中加载天地图的影像底图，需要使用天地图的瓦片服务 URL，并将其添加为栅格图层。

以下是一个示例代码片段，展示如何在 MapLibre GL 中加载天地图的影像底图：

// 创建地图实例
var map = new maplibregl.Map({
  container: 'map-container', // 替换为你的地图容器的 ID
  style: 'mapbox://styles/mapbox/streets-v11', // 设置初始底图样式
  center: [lng, lat], // 设置地图中心点的经纬度
  zoom: 12 // 设置初始缩放级别
});

// 添加天地图影像底图
map.on('load', function() {
  map.addSource('tdt-source', {
    type: 'raster',
    tiles: [
      'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}',
      'http://t1.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}',
      'http://t2.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}',
      'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
    ],
    tileSize: 256
  });

  map.addLayer({
    id: 'tdt-layer',
    type: 'raster',
    source: 'tdt-source',
    minzoom: 0,
    maxzoom: 18
  });
});

在上述代码中，我们创建了地图实例，并设置了初始底图样式。然后，在地图加载完成后的回调函数中，使用 map.addSource() 方法添加了一个瓦片源，使用天地图影像瓦片的 URL。

在 map.addSource() 方法的调用中，我们提供了栅格源的类型 'raster'，并在 tiles 属性中指定了天地图影像瓦片的 URL。

接下来，我们使用 map.addLayer() 方法添加了一个栅格图层。在图层的配置中，我们设置了图层的 ID、类型、源（使用 'tdt-source' 作为源名称）和缩放级别范围。

通过这段代码，可以在 MapLibre GL 中加载天地图的影像底图。请确保提供有效的天地图影像瓦片 URL，并根据需要调整其他图层属性。

mapbox-gl实战教程：加载各种底图技巧