Cesium加载天地图在线卫星切片，中文标注，防止视角钻入底下，加载超图在线地形服务

最新推荐文章于 2025-07-15 16:08:03 发布

一个修理地球的人

最新推荐文章于 2025-07-15 16:08:03 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签： Cesium 天地图切片服务地形服务视角入底下

本文链接：https://blog.youkuaiyun.com/wo_buzhidao/article/details/84141161

Cesium 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用Cesium加载天地图卫星影像及中文注记服务，并结合超图地形服务实现地球三维视图。代码示例展示了如何避免摄像头钻入地形下方的问题，提供流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本代码展示加载天地图服务卫星和中文标志

加载超图地形服务

解决视角钻入底下的问题

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超图加载在线地形数据stk</title>
		<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
		<script type="text/javascript" src="../Build/Cesium.js" ></script>
	</head>
	<body>
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
	    var url="https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path";
		var vtxfTerrainProvider = new Cesium.CesiumTerrainProvider({
        url : url,
        requestVertexNormals : true
        });
	    var viewer = new Cesium.Viewer('cesiumContainer', {
	    terrainProvider: vtxfTerrainProvider,
	    imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
				          url: 'http://t0.tianditu.com/img_w/wmts?',
				          layer: 'img',
				          style: 'default',
				          format: 'tiles',
				          tileMatrixSetID: 'w',
				          credit: new Cesium.Credit('天地图全球影像服务'),
				          maximumLevel: 18
		 })
		});
			  //全球影像中文注记服务
	   	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		    url: "http://t0.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",
		    layer: "tdtAnnoLayer",
		    style: "default",
		    format: "image/jpeg",
		    tileMatrixSetID: "GoogleMapsCompatible",
		    show: false
		}));
		
		viewer.scene.preRender.addEventListener(this.undergroundMode);
		  //禁止摄像头入地
	    function  undergroundMode() {
	      let { viewer } = this;
	      if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
	        //地下浏览
	        viewer.camera._suspendTerrainAdjustment = false;
	        viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
	        viewer.camera._adjustHeightForTerrain();
	      }
	    },
	</script>
</html>

在这里插入图片描述