初始化地图

<template>
  <div id="container" class="box">
    <div id="cesiumBox"></div>
  </div>
</template>

<script>
import * as Cesium from "cesium";

const init = ()=>{
      // 注册的token
      Cesium.Ion.defaultAccessToken = "your_access_token";
      // 初始化地图
      const viewer = new Cesium.Viewer("cesiumBox", {
        baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮
        geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮
        navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮
        homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮
        sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)
        animation: false, // 如果设置为false，将不会创建左下角动画小部件
        timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件
        fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮
        scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存
        shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel
        infoBox: false, // 是否显示点击要素之后显示的信息
        sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源
        // 使用高德影像地形地图
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        }),
      });
      // 加上高德影像注记地图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        })
      );
      // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
      const boundingSphere = new Cesium.BoundingSphere(
        Cesium.Cartesian3.fromDegrees(120.55538, 31.87532, 100),
        15000
      );
      // 定位到初始位置
      viewer.camera.flyToBoundingSphere(boundingSphere, {
        // 动画，定位到初始位置的过渡时间，设置成0，就没有动画
        duration: 0,
      });
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    } 
};
</script>

<style scoped lang="scss">
#cesiumBox {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

高德地图资源

//卫片 
http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

//路网
https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=11 

//地名
https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=4

//地名+路网 
http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}

//矢量切片风格 
http://webrd01.is.autonavi.com/appmaptile?&scale=1&lang=zh_cn&style=8&x={x}&y={y}&z={z}

天地图资源

// 服务负载子域     
var subdomains=['0','1','2','3','4','5','6','7'];
//全球矢量底图服务
new Cesium.WebMapTileServiceImageryProvider({            
    url: "http://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&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",//使用谷歌的瓦片切片方式   
    })   
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({  
    //调用矢量地图中文注记服务  
    url: "http://t{s}.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=替换你的token",   
    subdomains:subdomains,  
    layer: "tdtAnnoLayer",   
    style: "default",   
    format: "image/jpeg",    
    tileMatrixSetID: "GoogleMapsCompatible",  
}));

//影像地图 
http://t{s}.tianditu.com/img_w/wmts?service=w、、mts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=替换你的token

//影像注记 
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&tk=替换你的token

百度地图资源

//影像数据 
http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46  

//矢量切片
http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1 

//标注 
http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles={sh/sl}&v=020

//风格地图 
http://api0.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=dark   

//可显示的风格
dark
midnight
grayscale
hardedge
light
redalert
googlelite
grassgreen
pink
darkgreen
bluish 

imageryProvider : new BaiduImageryProvider({   
    url: "http://api0.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=googlelite" 
 })