当前位置：首页 > news >正文

关于cesium初始化配置参数说明

news 2026/8/10 10:48:30

1、创建一个地图容器

<div id="cesiumContainer"></div>

2、给容器一个样式大小

#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?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + 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初始化就创建好了，在页面初始化的时候调用即可，效果如下：

查看全文

http://www.cnnetsun.cn/news/3944823.html