使用原生JS在Cesium中加载天地图矢量、影像底图

eggcode

于 2025-06-17 11:54:52 发布

阅读量1.2k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签： javascript cesium 天地图

本文链接：https://blog.csdn.net/liqian_ken/article/details/148709593

cesium 专栏收录该内容

1 篇文章

订阅专栏

文章目录

效果图
- 矢量底图
- 影像底图
申请天地图密钥
代码（可直接运行）

效果图

矢量底图

在这里插入图片描述

放大效果：
在这里插入图片描述

影像底图

在这里插入图片描述
放大效果：

申请天地图密钥

天地图官方申请密钥地址：https://console.tianditu.gov.cn/api/key

创建新应用：
在这里插入图片描述
创建【浏览器】端的应用：

由此可以获取自己的密钥Key，在后面Cesium中使用。

下面使用的底图地址（似乎只能使用球面墨卡托投影的底图）：
在这里插入图片描述

代码（可直接运行）

引用的是官方在线的js和css地址，需保持网络通畅。
将tdt_token 换成自己前面申请的天地图浏览器端的key。
函数loadTDT中，type为0时加载影像底图、否则加载矢量底图。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载cesium</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>


<body>
    <div id="cesiumContainer"></div>
    <script>
        function load() {
            Cesium.Ion.defaultAccessToken = '';//不使用Cesium.Ion

            const viewer = new Cesium.Viewer('cesiumContainer', {
                imageryProvider: false,  //不自动加载默认影像

                //隐藏一些面板、按钮等样式，只保留最基本的三维地球
                animation: false,
                homeButton: false,
                navigationHelpButton: false,
                timeline: false,
                selectionIndicator: false,
                sceneModePicker: false,
                infoBox: false,
                geocoder: false,
                vrButton: false,
                fullscreenButton: false,
                baseLayerPicker: false,
            });
            viewer.cesiumWidget.creditContainer.style.display = "none";//不显示logo

            loadTDT(viewer, 1);

            //设置相机位置和方向
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(118.91, 32.11, 5000),//高度：5000、10000000
                orientation: {
                    heading: Cesium.Math.toRadians(0), // 东方向角度
                    pitch: Cesium.Math.toRadians(-90), // 俯仰角(-90为垂直向下)
                    roll: 0.0
                }
            });
        }


        //type为0时加载影像底图、否则加载矢量底图
        function loadTDT(viewer, type) {
            let tdt_token = "换成自己的天地图key";//天地图token
            let option = {
                tileMatrixSetID: "w",
                format: "tiles",
                style: "default",
                minimumLevel: 0,
                maximumLevel: 18,
                credit: "Tianditu",
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
            };
            if (type === 0) {
                //加载影像影像
                const imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://{s}.tianditu.gov.cn/img_w/wmts?tk=' + tdt_token,
                    layer: "img",
                    ...option
                });
                const imageryProvider_cia = new Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://{s}.tianditu.gov.cn/cia_w/wmts?tk=' + tdt_token,
                    layer: "cia",
                    ...option
                });
                viewer.imageryLayers.addImageryProvider(imageryProvider);
                viewer.imageryLayers.addImageryProvider(imageryProvider_cia);
            } else {
                //加载矢量底图
                const vectorProvider = new Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://{s}.tianditu.gov.cn/vec_w/wmts?tk=' + tdt_token,
                    layer: "vec",
                    ...option
                });
                const vectorProvider_cia = new Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://{s}.tianditu.gov.cn/cva_w/wmts?tk=' + tdt_token,
                    layer: "cva",
                    ...option
                });
                viewer.imageryLayers.addImageryProvider(vectorProvider);
                viewer.imageryLayers.addImageryProvider(vectorProvider_cia);
            }
        }
        load();
    </script>
    </div>
</body>

</html>