Cesium 加载天地图影像图示例
- Cesium 加载天地图影像图示例
- 示例代码
- 在线示例
Cesium 加载天地图影像图示例
前两天在搞无人机倾斜摄影数据转 3dtile 的时候，使用 Cesium 加载 3dtile，默认底图加载很慢，想切换成天地图资源。结果找了很久都是有问题的资源，各种博客也都过期了。
因此，这里放上我的源码以及在线示例，提供给需要的 GISer 使用！
示例代码
注意：需要自己 本地的 Cesium 环境 资源！
<!DOCTYPE html>
<html lang="en">
<head><!-- Use correct character set. --><meta charset="utf-8" /><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>Cesium 加载天地图示例</title><!-- 注意：这里需要换成自己的资源 --><script src="../Build/CesiumUnminified/Cesium.js"></script><style><!-- 注意：这里需要换成自己的资源 -->@import url(../Build/CesiumUnminified//Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>// 这个 tk 只能在本域名下使用var token = '2b7cbf61123cbe4e9ec6267a87e7442f';// 服务域名var tdtUrl = 'https://t{s}.tianditu.gov.cn/';// 服务负载子域var subdomains=['0','1','2','3','4','5','6','7'];var viewer = new Cesium.Viewer('cesiumContainer',{shouldAnimate: true,selectionIndicator:true,animation:false, //动画homeButton:false, //home键geocoder:false, //地址编码baseLayerPicker:false, //图层选择控件timeline:false, //时间轴fullscreenButton:false, //全屏显示infoBox:false, //点击要素之后浮窗sceneModePicker:false, //投影方式 三维/二维navigationInstructionsInitiallyVisible:false, //导航指令navigationHelpButton:false, //帮助信息selectionIndicator:false, // 选择imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({//影像底图url: "http://t{s}.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="+token,subdomains: subdomains,layer: "tdtImgLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式show: true})});viewer.imageryLayers.addImageryProvider(new window.Cesium.WebMapTileServiceImageryProvider({//影像注记url: "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.jpg&tk="+token,subdomains: subdomains,layer: "tdtCiaLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: true}));// // 叠加国界服务var iboMap = new window.Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,tilingScheme : new window.Cesium.WebMercatorTilingScheme(),maximumLevel : 10});viewer.imageryLayers.addImageryProvider(iboMap);let flyEntity = new Cesium.Entity({id: 'flyTmp',position: Cesium.Cartesian3.fromDegrees(116.37685970334466, 39.954266782491445),point: {pixelSize: 100,color: Cesium.Color.WHITE.withAlpha(0),outlineColor: Cesium.Color.WHITE.withAlpha(0),outlineWidth: 1}});viewer.entities.add(flyEntity);viewer.flyTo(flyEntity, {offset: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-90),range: 200000},duration: 5,});</script>
</body>
</html>在线示例
Cesium 加载天地图：Cesium tianditu
