三维地图Cesium加载天地图

1、首先去天地图官网申请key码，http://lbs.tianditu.gov.cn/server/MapService.html
2、下载Cesium静态资源包文件，如图

3、引入并加载

<div class="background"  >
      <div id="cesiumContainer">div>
 div>

initMap(){
        var token = '7b56038c276128a86a5b946404bf4df4';
        // 服务域名
        var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
        // 服务负载子域
        var subdomains=['0','1','2','3','4','5','6','7'];
        // Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNjUxMzVjOC01ODVlLTRkZGMtODg0Ni1kM2M2MmUyNTQ2ZjUiLCJpZCI6NTIxNjEsImlhdCI6MTYxODQ2OTkxMX0.t4W6qrHOFm2WIA5WK82xpVBfFt524Cf94GR0NiRhZBk";
        // Cesium.Ion.defaultAccessToken = token

        var viewer = new Cesium.Viewer('cesiumContainer',{
          shouldAnimate: true,
          selectionIndicator:true,
          animation:false,       //动画
          homeButton:false,       //home键
          geocoder:false,         //地址编码
          baseLayerPicker:false, //图层选择控件
          timeline:false,        //时间轴
          fullscreenButton:false, //全屏显示
          infoBox:false,         //点击要素之后浮窗
          sceneModePicker:false,  //投影方式  三维/二维
          navigationInstructionsInitiallyVisible:false, //导航指令
          navigationHelpButton:false,     //帮助信息
          selectionIndicator:false, // 选择
          imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({
            //影像底图
            url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+token,
            subdomains: subdomains,
            layer: "tdtImgLayer",
            style: "default",
            format: "image/jpeg",

            tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
            show: true
          }),

          //
          // terrainProvider: new window.Cesium.CesiumTerrainProvider({
          //   url: window.Cesium.IonResource.fromAssetId(1),
          // }),
        });
        viewer._cesiumWidget._creditContainer.style.display = "none"
        // 叠加影像服务
        var imgMap = new window.Cesium.UrlTemplateImageryProvider({
          url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
          subdomains: subdomains,
          format: "image/jpeg",
          tilingScheme : new window.Cesium.WebMercatorTilingScheme(),
          // maximumLevel : 18
        });
        viewer.imageryLayers.addImageryProvider(imgMap);
        // viewer._cesiumWidget._creditContainer.style.display = "none";  // 隐藏cesium ion
        viewer.imageryLayers.addImageryProvider(new window.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
        }));

        // // 叠加国界服务
        var iboMap = new window.Cesium.UrlTemplateImageryProvider({
          url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
          subdomains: subdomains,
          tilingScheme : new window.Cesium.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);

        }

        var provider = new window.Cesium.GeoTerrainProvider({
          urls: terrainUrls
        });

        viewer.terrainProvider = provider;
         // 将三维球定位到中国
         let that = this;
         setTimeout(() => {
          viewer.camera.flyTo({
          destination: window.Cesium.Cartesian3.fromDegrees(
             106.780712691818,
             35.684390871705,
            //  106.782949654136,
            //  35.6862154317569
          ),
          orientation: {
            heading :  window.Cesium.Math.toRadians(348.4202942851978),
            pitch : window.Cesium.Math.toRadians(-89.74026687972041),
            roll : window.Cesium.Math.toRadians(0)
          },
          complete:function callback() {
            // 定位完成之后的回调函数
            that.NavigaOn();
           }
         });                                                 
        }, 2300);
        
        // 叠加三维地名服务
        var wtfs = new window.Cesium.GeoWTFS({
          viewer,
          subdomains:subdomains,
          metadata:{
            boundBox: {
              minX: -180,
              minY: -90,
              maxX: 180,
              maxY: 90
            },
            minLevel: 1,
            maxLevel: 20
          },
          aotuCollide: true, //是否开启避让
          collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
          serverFirstStyle: true, //服务端样式优先
          labelGraphics: {
            font:"28px sans-serif",
            fontSize: 28,
            fillColor:window.Cesium.Color.WHITE,
            scale: 0.5,
            outlineColor:window.Cesium.Color.BLACK,
            outlineWidth: 5,
            style:window.Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground:false,
            backgroundColor:window.Cesium.Color.RED,
            backgroundPadding:new window.Cesium.Cartesian2(10, 10),
            horizontalOrigin:window.Cesium.HorizontalOrigin.MIDDLE,
            verticalOrigin:window.Cesium.VerticalOrigin.TOP,
            eyeOffset:window.Cesium.Cartesian3.ZERO,
            pixelOffset:new window.Cesium.Cartesian2(0, 8)
          },
          billboardGraphics: {
            horizontalOrigin:window.Cesium.HorizontalOrigin.CENTER,
            verticalOrigin:window.Cesium.VerticalOrigin.CENTER,
            eyeOffset:window.Cesium.Cartesian3.ZERO,
            pixelOffset:window.Cesium.Cartesian2.ZERO,
            alignedAxis:window.Cesium.Cartesian3.ZERO,
            color:window.Cesium.Color.WHITE,
            rotation:0,
            scale:1,
            width:18,
            height:18
          }
        });

        //三维地名服务，使用wtfs服务
        wtfs.getTileUrl = function(){
          return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token;
        }

        wtfs.getIcoUrl = function(){
          return tdtUrl + 'mapservice/GetIcon?id={id}&tk='+ token;
        }

        wtfs.initTDT([{"x":6,"y":1,"level":2,"boundBox":{"minX":90,"minY":0,"maxX":135,"maxY":45}},{"x":7,"y":1,"level":2,"boundBox":{"minX":135,"minY":0,"maxX":180,"maxY":45}},{"x":6,"y":0,"level":2,"boundBox":{"minX":90,"minY":45,"maxX":135,"maxY":90}},{"x":7,"y":0,"level":2,"boundBox":{"minX":135,"minY":45,"maxX":180,"maxY":90}},{"x":5,"y":1,"level":2,"boundBox":{"minX":45,"minY":0,"maxX":90,"maxY":45}},{"x":4,"y":1,"level":2,"boundBox":{"minX":0,"minY":0,"maxX":45,"maxY":45}},{"x":5,"y":0,"level":2,"boundBox":{"minX":45,"minY":45,"maxX":90,"maxY":90}},{"x":4,"y":0,"level":2,"boundBox":{"minX":0,"minY":45,"maxX":45,"maxY":90}},{"x":6,"y":2,"level":2,"boundBox":{"minX":90,"minY":-45,"maxX":135,"maxY":0}},{"x":6,"y":3,"level":2,"boundBox":{"minX":90,"minY":-90,"maxX":135,"maxY":-45}},{"x":7,"y":2,"level":2,"boundBox":{"minX":135,"minY":-45,"maxX":180,"maxY":0}},{"x":5,"y":2,"level":2,"boundBox":{"minX":45,"minY":-45,"maxX":90,"maxY":0}},{"x":4,"y":2,"level":2,"boundBox":{"minX":0,"minY":-45,"maxX":45,"maxY":0}},{"x":3,"y":1,"level":2,"boundBox":{"minX":-45,"minY":0,"maxX":0,"maxY":45}},{"x":3,"y":0,"level":2,"boundBox":{"minX":-45,"minY":45,"maxX":0,"maxY":90}},{"x":2,"y":0,"level":2,"boundBox":{"minX":-90,"minY":45,"maxX":-45,"maxY":90}},{"x":0,"y":1,"level":2,"boundBox":{"minX":-180,"minY":0,"maxX":-135,"maxY":45}},{"x":1,"y":0,"level":2,"boundBox":{"minX":-135,"minY":45,"maxX":-90,"maxY":90}},{"x":0,"y":0,"level":2,"boundBox":{"minX":-180,"minY":45,"maxX":-135,"maxY":90}}]);
      }

  #cesiumContainer {
    width: 100%;
    height: 1000px;
  }
  #cesiumContainer .cesium-viewer-bottom{
    display: none;
  }

如图

以上就是Cesium加载天地图方法，希望对各位有所帮助，不懂的地方可以随时下方评论