cesium加载天地图影像地图与影像注记

import * as Cesium from 'cesium';

/**

 * 天地图工具类 - 封装天地图相关操作

 */

export class TdMapUtil {

  /**

   * 构造函数

   * @param {Object} options 配置选项

   * @param {string} options.token 天地图访问令牌

   * @param {string} [options.tdtUrl] 天地图服务域名，默认值：'https://t{s}.tianditu.gov.cn/'

   * @param {Array} [options.subdomains] 服务负载子域名，默认值：['0', '1', '2', '3', '4', '5', '6', '7']

   * @param {number} [options.maximumLevel] 最大缩放级别，默认值：18

   */

  constructor(options = {}) {

    const defaultOptions = {

      token: '',

      tdtUrl: 'https://t{s}.tianditu.gov.cn/',

      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],

      maximumLevel: 18

    };

   

    this.options = { ...defaultOptions, ...options };

   

    if (!this.options.token) {

      console.warn('天地图工具类初始化：缺少token参数');

    }

   

    // 图层类型映射

    this.layerTypes = {

      // 影像图层

        IMAGE: { base: 'img_w', anno: 'cia_w' }, // 球面墨卡托投影

    //   IMAGE: { base: 'img_c', anno: 'cia_c' }, //经纬度投影（南半球没有投影数据）

      // 矢量图层

      VECTOR: { base: 'vec_w', anno: 'cva_w' },

      // 地形图层

      TERRAIN: { base: 'ter_w', anno: 'cta_w' },

      // 矢量英文图层

      VECTOR_EN: { base: 'vec_c', anno: 'cva_c' },

      // 影像英文图层

      IMAGE_EN: { base: 'img_c', anno: 'cia_c' }

    };

  }

 

  /**

   * 创建天地图影像提供者

   * @param {string} layerType 图层类型代码

   * @param {Object} [options] 额外选项

   * @returns {Cesium.UrlTemplateImageryProvider} 影像提供者实例

   */

  createImageryProvider(layerType, options = {}) {

    const { tdtUrl, subdomains, token, maximumLevel } = this.options;

   

    return new Cesium.UrlTemplateImageryProvider({

      url: `${tdtUrl}DataServer?T=${layerType}&x={x}&y={y}&l={z}&tk=${token}`,

      subdomains: subdomains,

      tilingScheme: new Cesium.WebMercatorTilingScheme(),

      maximumLevel: maximumLevel,

      ...options

    });

  }

 

  /**

   * 添加天地图图层到视图

   * @param {Cesium.Viewer} viewer Cesium视图实例

   * @param {string|Object} mapType 地图类型，支持 'IMAGE' 影像 |'VECTOR' 矢量|'TERRAIN'| 地形图 自定义对象

   * @param {Object} [options] 配置选项

   * @param {boolean} [options.addAnno=true] 是否添加注记

   * @param {Object} [options.baseOptions={}] 底图图层配置选项

   * @param {Object} [options.annoOptions={}] 注记图层配置选项

   * @returns {Object} 包含底图和注记图层实例的对象

   */

  addLayerToViewer(viewer, mapType, options = {}) {

    const { addAnno, baseOptions = {}, annoOptions = {} } = options;

   

    // 确定图层类型

    let layerInfo;

    if (typeof mapType === 'string') {

      layerInfo = this.layerTypes[mapType];

      if (!layerInfo) {

        console.error(`不支持的地图类型: ${mapType}`);

        return null;

      }

    } else {

      layerInfo = mapType;

    }

   

    // 创建并添加底图

    const baseLayer = this.createImageryProvider(layerInfo.base, baseOptions);

    viewer.imageryLayers.addImageryProvider(baseLayer);

   

    // 创建并添加注记

    let annoLayer = null;

    if (addAnno && layerInfo.anno) {

      annoLayer = this.createImageryProvider(layerInfo.anno, annoOptions);

      viewer.imageryLayers.addImageryProvider(annoLayer);

    }

   

    return {

      baseLayer,

      annoLayer

    };

  }

 

  /**

   * 添加影像底图（便捷方法）

   * @param {Cesium.Viewer} viewer Cesium视图实例

   * @param {Object} [options] 配置选项

   * @returns {Object} 图层对象

   */

  addImageLayer(viewer, options = {}) {

    return this.addLayerToViewer(viewer, 'IMAGE', options);

  }

 

  /**

   * 添加矢量底图（便捷方法）

   * @param {Cesium.Viewer} viewer Cesium视图实例

   * @param {Object} [options] 配置选项

   * @returns {Object} 图层对象

   */

  addVectorLayer(viewer, options = {}) {

    return this.addLayerToViewer(viewer, 'VECTOR', options);

  }

 

  /**

   * 添加地形底图（便捷方法）

   * @param {Cesium.Viewer} viewer Cesium视图实例

   * @param {Object} [options] 配置选项

   * @returns {Object} 图层对象

   */

  addTerrainLayer(viewer, options = {}) {

    return this.addLayerToViewer(viewer, 'TERRAIN', options);

  }

}

// 导出默认实例创建函数

export function createTdMapUtil(options) {

  return new TdMapUtil(options);

}

// 默认导出

export default TdMapUtil;



调用

const tdMapUtil = new TdMapUtil({

  token: '你自己申请的key',

  maximumLevel: 18

});

// 方法1：使用便捷方法添加影像底图（自动包含注记）

tdMapUtil.addImageLayer(viewer,{addAnno:true});