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' },
// 矢量图层
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:false});