1、创建一个地图容器div idcesiumContainer/div2、给容器一个样式大小#cesiumContainer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; }3、初始化cesium地图以天地图为例var tianditu_token 你自己申请的天地图token var TDT_IMG_C http://{s}.tianditu.gov.cn/img_c/wmts?servicewmtsrequestGetTileversion1.0.0 LAYERimgtileMatrixSetcTileMatrix{TileMatrix}TileRow{TileRow}TileCol{TileCol} styledefaultformattilestk tianditu_token function cesiumInit() { //初始化cesium三维地球 Cesium.Ion.defaultAccessToken eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ODczNDA2MC1lN jFhLTQ1ZmEtYThjYS04YTU0OGY5YjMxYzQiLCJpZCI6MTQ1NzMsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJd LCJpYXQiOjE1NzY0ODA2MTJ9.gCqXW4_Ikl5x_0muOExG1K6Xwhc2_TEJOTAKwT4MRJU viewer new Cesium.Viewer(cesiumContainer, { geocoder: false,//是否显示地名查找控件 sceneModePicker: false,//是否显示场景模式选择控件 baseLayerPicker: false,//是否显示底图切换控件 navigationHelpButton: false,//是否显示导航帮助按钮 animation: false,//是否显示左下角的动画控件 skyBox: false, //隐藏天空盒 imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: tdtImg_c, style: default, format: tiles, tileMatrixSetID: c, subdomains: [t0, t1, t2, t3, t4, t5, t6, t7], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ], maximumLevel: 50, show: false }),//影像图层提供者仅在 baseLayerPicker 为 false 时生效 homeButton: false,//是否显示返回主视角按钮 orderIndependentTranslucency: false,//顺序无关半透明渲染 contextOptions: { webgl: { alpha: true,// canvas是否带alpha通道想要页面DOM透过地球背景必须true } }, fullscreenButton: false,//是否显示全屏按钮 timeline: true,//是否显示时间轴 selectionIndicator: false,//是否显示选中指示器 infoBox: false,//是否显示信息框 }) //隐藏logo viewer.cesiumWidget.creditContainer.style.display none //隐藏大气圈及星空背景 viewer.scene.skyAtmosphere.brightShift -1 viewer.scene.backgroundColor new Cesium.Color(0.0, 0.0, 0.0, 0.0) viewer.scene.globe.baseColor new Cesium.Color(0.0, 0.0, 0.0, 0.0) ////判断是否支持图像渲染像素化处理 if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { viewer.resolutionScale window.devicePixelRatio } viewer.scene.fxaa true viewer.scene.postProcessStages.fxaa.enabled true // 设置缩放的最大高度 // viewer.scene.screenSpaceCameraController.minimumZoomDistance 1200; // viewer.scene.screenSpaceCameraController.maximumZoomDistance 800000; //隐藏时间轴 viewer.timeline.container.style.display none }至此cesium初始化就创建好了在页面初始化的时候调用即可效果如下