Vue3+Vite+Ts中使用CesiumJS(2) 基于天地图API进行图层添加

1.添加天地图Key、请求url、服务负载子域

// 天地图的key
const token = "1f77c3dd6f581d649774461b5f125e1b";
//天地图url
const tdtUrl = "https://t{s}.tianditu.gov.cn/";
// 服务负载子域
const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];

2.叠加底图

viewer.imageryLayers.addImageryProvider(
        //UrlTemplateImageryProvider：通过使用指定的 URL 模板请求切片来提供影像
        //也可使用WebMapTileServiceImageryProvider：由 [WMTS 1.0.0](http://www.opengeospatial.org/standards/wmts) 兼容服务器获取切片影像
        new Cesium.UrlTemplateImageryProvider({
            //天地图的影像底图url
            url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
            //天地图的矢量底图url
            // url: tdtUrl + "DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + token,
            subdomains: subdomains,
            tilingScheme: new Cesium.WebMercatorTilingScheme(),
            minimumLevel: 1,
            maximumLevel: 18,
	})
);

3.叠加国界服务

viewer.imageryLayers.addImageryProvider(
	new Cesium.UrlTemplateImageryProvider({
		url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,
		subdomains: subdomains,
		tilingScheme: new Cesium.WebMercatorTilingScheme(),
		maximumLevel: 10,
	})
);

3.叠加标注服务

viewer.imageryLayers.addImageryProvider(
	new Cesium.WebMapTileServiceImageryProvider({
		//天地图影像注记
		url:"http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+token,	
		subdomains: subdomains,
		layer: "tdtCiaLayer",
		style: "default",
		format: "image/jpeg",
		tileMatrixSetID: "GoogleMapsCompatible",
		show: true,
	})
);

4.配置地形数据

在Cesium.Viewer的options中配置terrain属性，如下

terrain: Cesium.Terrain.fromWorldTerrain(),// 默认的地形数据
// 自定义获取地形数据的url，因天地图三维地名、地形API维护中无法获取，暂用上述默认地形数据
//terrain: new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromUrl("地形数据的url")),

5.补充默认相机机位

// 将三维球定位到中国
viewer.camera.flyTo({
	destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
	orientation: {
		heading: Cesium.Math.toRadians(348.4202942851978),
		pitch: Cesium.Math.toRadians(-89.74026687972041),
		roll: Cesium.Math.toRadians(0),
		},
	complete: function callback() {
		// 定位完成之后的回调函数
	},
});