cesium加载天地图、高德、腾讯、离线瓦片地图

最新推荐文章于 2025-06-17 11:54:52 发布
原创最新推荐文章于 2025-06-17 11:54:52 发布 · 2.3k 阅读
7 ·
CC 4.0 BY-SA版权
文章标签：
#javascript
Cesium加载各种地图（百度、腾讯、高德、天地图、离线地图）
Cesium获取海拔高度、配置在线、离线地形服务
首先要申请天地图的token
<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>cesium地图加载</title>
        <!-- 引用cesium的js和css，天地图的扩展js -->
        <script src="../cesium/Cesium.js">
        </script>
        <link rel="stylesheet" href="../cesium/Widgets/widgets.css"/>
  
		<style type="text/css">
			*{
				margin: 0px;
			}
			.parent{
				display: flex;
				flex-flow: column;
				height:100vh;
			}
			.box1{
				width: 100%;
				height: 80%;
				position: relative;
				/* background-color: red;*/
				margin: 0;
				padding: 0; 
				overflow: hidden;
			}
			.box2{
				flex: 1;
				height: 20%;
				position: relative;
				/* background-color: blue; */
			}
		</style>
    </head>
	
    <body>
		<div class="parent">
			<div class="box1" id="cesiumContainer"></div>
			<div class="box2">
				<button onclick="getHeight()">获取海拔</button>
				<button onclick="cleanData()">清除数据</button>
				<button onclick="viewer.entities.getById('flyLine').show=false">隐藏飞机尾巴</button>
				<div id="dataView"></div>
			</div>
		</div>
		
		
    </body>
	
	<script>
		//Cesium官网注册后的授权token，没有token不能使用cesium在线的地形服务，这里需要改成自己的token
		Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODdmNjg1ZS00OGJjLTQ3MWYtOWFiOC0yNzgyNGYwOGZjNzEiLCJpZCI6MTcyNDg4LCJpYXQiOjE2OTc2MTM4ODN9.m-JQEv9YIo8U5GIwm1uLc4D_QtwMyuqJ6NathR6M2ag";
		viewer = new Cesium.Viewer('cesiumContainer', {
			animation: true, 
			baseLayerPicker:true, 

			geocoder:false,
			timeline: true,  //时间轴
			fullscreenButton: false, 
			sceneModePicker:true,
			navigationHelpButton:false, 
			selectionIndicator:false,
			navigationInstructionsInitiallyVisible:false,
			orderIndependentTranslucency: true,
			shadows: true,
			infoBox: false,
			homeButton:true,
			imageryProvider : new Cesium.WebMapServiceImageryProvider({
				url : ""
			})

		});  
		viewer._cesiumWidget._creditContainer.style.display = "none";
		
	
		
		function loadGaodeMap(){
			// 添加高德影像图
			let imgLayer = new Cesium.UrlTemplateImageryProvider({
				 url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
				 layer: "imgLayer",
				 minimumLevel: 3,
				 maximumLevel: 18
			});
			viewer.imageryLayers.addImageryProvider(imgLayer);
			
			
			// 影像注记
			let annoLayer = 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",
				layer: "annoLayer",
				style: "default",
				//format: "image/jpeg",
				//tileMatrixSetID: "GoogleMapsCompatible"
			});
			viewer.imageryLayers.addImageryProvider(annoLayer);
		}
		
		// 加载腾讯影像地图
		function loadTxMap(){
			let imgLayer = new Cesium.UrlTemplateImageryProvider({
				url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400",
				customTags: { 
				  sx: function(imageryProvider, x, y, level) { return x >> 4; }, 
				  sy: function(imageryProvider, x, y, level) { return ((1 << level) - y) >> 4 }
				}
				
			});
			viewer.imageryLayers.addImageryProvider(imgLayer);
			// 影像注记
			let annoLayer = new Cesium.UrlTemplateImageryProvider({
				url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=400",
				layer: "annoLayer"
			});
			viewer.imageryLayers.addImageryProvider(annoLayer);
		}
		// 加载天地图
		function loadTdtMap(){
			//天地图token
			var tk = "天地图token";
			//天地图影像
			var imgUrl = "http://t0.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="+tk;

			//中文标注
			var ciaUrl = "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&tk="+tk;
			//调用影响中文注记服务
			let imgLayer = new Cesium.WebMapTileServiceImageryProvider({
				url: imgUrl,
				layer: "imgLayer",
				minimumLevel: 0,
				maximumLevel: 18,
			});
			
			viewer.imageryLayers.addImageryProvider(imgLayer);
			
			//中文注记服务
			let annoLayer = new Cesium.WebMapTileServiceImageryProvider({ 
				url: ciaUrl,
				layer: "annoLayer",
				minimumLevel: 0,
				maximumLevel: 18,
			});
			viewer.imageryLayers.addImageryProvider(annoLayer);
			
		}
		
		
		// 加载离线地图
		function loadLocalMap(){
			let imgLayer = new Cesium.UrlTemplateImageryProvider({
				url: "http://uav.tf.com/map/jingmen/{z}/{x}/{y}.jpg",
				layer: "imgLayer",
				minimumLevel: 6,
				maximumLevel: 18
				
			});
			viewer.imageryLayers.addImageryProvider(imgLayer);
			
		}
		
		
		function initTerrain(){
			var terrainUrl="http://uav.tf.com/terrain/jingmen";
			// 恒歌科技
			var freegis="http://www.freexgis.com/web-data/terrain";
			// 火星科技
			var mars3d="http://data.mars3d.cn/terrain";
			var myTerrainProvider = new Cesium.CesiumTerrainProvider({
				url:terrainUrl
			});
			viewer.terrainProvider = myTerrainProvider;
		}
		
		
		function flyTo(){
			var lng=112.060452;
			var lat=30.983561;
		
			homeView = {
				destination: Cesium.Cartesian3.fromDegrees(lng, lat, 8000),
				orientation: {
					// 航向
					heading: Cesium.Math.toRadians(0),
					// 俯仰
					pitch: Cesium.Math.toRadians(-90),
					// 滚转
					roll: 0.0
				},
				// camera 初始化后回调函数
				//complete: createModel
			}
			
			// 初始化视角（飞行模式）
			viewer.camera.flyTo(homeView);
		}
		function cleanData(){
			document.getElementById("dataView").innerHTML="";
		}
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		
		handler.setInputAction(function(evt) {
			var ray=viewer.camera.getPickRay(evt.position);
			var cartesian=viewer.scene.globe.pick(ray,viewer.scene);
			var cartographic=Cesium.Cartographic.fromCartesian(cartesian);
			var height = cartographic.height;
	
			var dataView = document.getElementById("dataView");
			dataView.innerHTML = dataView.innerHTML +"<p>海拔:"+height + "</p> ";
			
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
		
		
		
		//loadGaodeMap();
			
		//loadTxMap();
		loadLocalMap();
		
		//loadTdtMap();
		
		initTerrain();
		flyTo();
		
		
		
		
	</script>
</html>
Cesium加载天地图效果如图