Cesium 实战 00 - Cesium 加载天地图影像图示例

非科班Java出身GISer

已于 2024-05-06 10:55:55 修改

阅读量3.5k

点赞数 4

分类专栏： Cesium 学习教程 Cesium 实战教程文章标签： cesium cesium 天地图 cesium影像图 cesium加载天地图

于 2022-10-10 20:11:40 首次发布

本文链接：https://blog.youkuaiyun.com/linzi19900517/article/details/127118613

版权

Cesium 实战教程同时被 2 个专栏收录

61 篇文章 ¥49.90 ¥99.00

订阅专栏

Cesium 学习教程

7 篇文章

订阅专栏

本文提供了Cesium加载天地图影像图的示例代码和在线预览，解决了默认底图加载慢的问题，方便GIS开发者使用。

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

2023年4月19日更新—搞了一个 Cesium 镜像，欢迎使用：沙盒示例和 API

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. -->
    <meta
            name="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>