Day3 自定义cesium图层

# Day3 自定义cesium图层

教程简介：在本教程中，我们将探讨如何在 Cesium 项目中创建和加载自定义图层。通过自定义图层，您可以根据特定需求展示地理空间数据，增强地图的可视化效果并提供更丰富的信息。我们还将介绍如何整合天地图服务，利用其丰富的地理数据资源丰富您的应用

## 准备工作

### 注册天地图账号并且获取key

- 申请地址：https://console.tianditu.gov.cn/api/key
- 登录后，在"我的应用"页面创建新应用，获取访问密钥(key)
- 注意：天地图提供不同类型的密钥，确保申请的是Web服务API的key

![图片.png](https://api.bestuss.cn/upload/6896dafb9d636.png)
### 准备CesiumIon账号，并且创建Assets Tokens

- 访问 https://cesium.com/ion/tokens/ 创建账号
- 创建新的Access Token，用于访问Cesium Ion资源
- Token创建完成后，复制备用

![CesiumToken.gif](https://api.bestuss.cn/upload/6896dbc40bf91.gif)

## 加载天地图

> 代码展示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <title>整洁的空Cesium Earth</title>
    <style>
        /* 重置基本样式 */
        html,
        body,
        #earth {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

.cesium-widget-credits {
            display: none !important;
        }
    </style>
</head>

<body>
    <div style="position:absolute;z-index:10;top:10px;left:10px;">
        <select id="layerSelect">
            <option value="tdt">天地图影像</option>
            <option value="cesium">Cesium 默认影像</option>
        </select>
    </div>
    <div id="earth"></div>
    <script>
        Cesium.Ion.defaultAccessToken = "cesiumion key";
        const viewer = new Cesium.Viewer('earth', {
            // 禁用动画效果
            animation: false,
            // 禁用地码器功能
            geocoder: false,
            // 禁用Cesium小部件
            cesiumWidget: false,
            // 禁用全屏按钮
            fullscreenButton: false,
            // 禁用首页按钮
            homeButton: false,
            // 禁用场景模式选择器
            sceneModePicker: false,
            // 禁用时间线组件
            timeline: false,
            // 禁用导航帮助按钮
            navigationHelpButton: false,
            // 禁用基础图层选择器
            baseLayerPicker: false,
        });
        // 天地图影像底图
        // 创建天地图影像图层提供者
        const tdtImg = new Cesium.WebMapTileServiceImageryProvider({
            // 服务URL地址，使用天地图提供的WMTS服务
            url: `https://t0.tianditu.gov.cn/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=你的天地图key`,
            // 图层名称
            layer: "tdtImgLayer",
            // 图层样式
            style: "default",
            // 图片格式
            format: "image/jpeg",
            // 瓦片矩阵集ID，使用Google Maps兼容的坐标系
            tileMatrixSetID: "GoogleMapsCompatible",
            // 最大缩放级别
            maximumLevel: 18
        });
        // 天地图注记
        const tdtAnno = new Cesium.WebMapTileServiceImageryProvider({
            url: `https://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ac919d63816e20e2179ef656191edacd`,
            layer: "tdtAnnoLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            maximumLevel: 18
        });

// 先添加天地图影像和注记
        const tdtImgLayer = viewer.imageryLayers.addImageryProvider(tdtImg);
        const tdtAnnoLayer = viewer.imageryLayers.addImageryProvider(tdtAnno);

// 监听select切换
        document.getElementById('layerSelect').addEventListener('change', async function (e) {
            if (e.target.value === 'tdt') {
                // 切换到天地图
                viewer.imageryLayers.removeAll();
                viewer.imageryLayers.addImageryProvider(tdtImg);
                viewer.imageryLayers.addImageryProvider(tdtAnno);
            } else if (e.target.value === 'cesium') {
                // 切换到Cesium默认影像
                viewer.imageryLayers.removeAll();
                const layer = viewer.imageryLayers.addImageryProvider(
                    await Cesium.IonImageryProvider.fromAssetId(2),
                );
            }
        });
    </script>
</body>

</html>
```

## 代码解析

```javascript
const tdtImg = new Cesium.WebMapTileServiceImageryProvider({
            // 服务URL地址，使用天地图提供的WMTS服务
            url: `https://t0.tianditu.gov.cn/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=你的天地图key`,
            // 图层名称
            layer: "tdtImgLayer",
            // 图层样式
            style: "default",
            // 图片格式
            format: "image/jpeg",
            // 瓦片矩阵集ID，使用Google Maps兼容的坐标系
            tileMatrixSetID: "GoogleMapsCompatible",
            // 最大缩放级别
            maximumLevel: 18
        });
```

### WebMapTileServiceImageryProvider

`Cesium.WebMapTileServiceImageryProvider` 是Cesium中用于加载WMTS服务图层的核心类。主要参数说明：

- `url`: WMTS服务的请求模板URL
- `layer`: 图层名称
- `style`: 图层样式
- `format`: 返回的图片格式
- `tileMatrixSetID`: 瓦片矩阵集ID，指定使用的坐标系
- `maximumLevel`: 最大缩放级别

### 图层管理

通过 `viewer.imageryLayers` 可以管理场景中的所有影像图层：

- `addImageryProvider()`: 添加新的图层
- `removeAll()`: 移除所有图层
- `raise()`: 提升图层顺序
- `lower()`: 降低图层顺序

> 效果展示

![效果展示.gif](https://api.bestuss.cn/upload/689892dc88c9e.gif)

Loading content...

添加新评论

最新文章

最近回复

分类

归档

杂项