Cesium学习笔记——Cesium中添加天地图三维服务插件

本文参考了天地图的官方文档，下附链接：
http://lbs.tianditu.gov.cn/docs/#/sanwei/

1、天地图服务引入

（1）通过script标签在页面中直接引入（推荐）

<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>

（2）通过npm命令安装，在webpack中导入

    安装插件

npm i cesium-tdt --save

    安装完成之后，将项目的根目录/node_modules/cesium-tdt/src/路径下的lib文件夹拷贝到自身项目的src下

# 入口文件导入插件
import './lib'

const viewer = new Cesium.Map('cesiumContainer', {
    shouldAnimate: true,
    selectionIndicator:true,
    infoBox:false
});

2、页面引用

	//引入Cesium服务
	import * as CesiumApi from 'cesium'
	
	var token = 'yourTokenHere';
	// 服务域名
	var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
	// 服务负载子域
	var subdomains=['0','1','2','3','4','5','6','7'];
	
	// 叠加影像服务
    var imgMap = new CesiumApi.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new CesiumApi.WebMercatorTilingScheme(),
        maximumLevel : 18
    });
    viewer.imageryLayers.addImageryProvider(imgMap); 
    
	// 叠加国界服务
	var iboMap = new CesiumApi.UrlTemplateImageryProvider({
	    url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
	    subdomains: subdomains,
	    tilingScheme : new CesiumApi.WebMercatorTilingScheme(),
	    maximumLevel : 10
	});
	viewer.imageryLayers.addImageryProvider(iboMap);
	
	// 叠加地形服务
	var terrainUrls = new Array();
	for (var i = 0; i < subdomains.length; i++){
	    var url = tdtUrl.replace('{s}', subdomains[i]) + 'DataServer?T=elv_c&tk=' + token;
	    terrainUrls.push(url);
	}
	//Cesium方法添加天地图地形，加载速度较慢
	var terrain=new CesiumApi.createWorldTerrain({
	    urls: terrainUrls,
	    requestWaterMask:false,           
	    requestVertexNormals:false       
	});        
	viewer.terrainProvider = terrain;