【Cesium教程第三章数据加载之影像加载2】

最新推荐文章于 2025-06-19 16:13:05 发布

原创

最新推荐文章于 2025-06-19 16:13:05 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化

3.1.4 加载高德地图

Cesium 提供了 UrlTemplatelmageryProvider 类来通过指定的 URL,模板请求地图。在创建Viewer 时，用户可以通过指定高德地图服务 URL来访问高德地图。加载高德地图的效果如下图所示：

具体代码如下：

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

<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <title>cesium教程第三章数据加载之影像加载2</title>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">

        Cesium.Ion.defaultAccessToken = 'cesium的tocken';
        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: true,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false,

        });
        //加载高德地图
        let imageryProvider = new Cesium.UrlTemplateImageryProvider({
            url:"https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            tilingScheme: new Cesium.WebMercatorTilingScheme(),
            credit: new Cesium.Credit("高德地图"),
        });
        viewer.imageryLayers.addImageryProvider(imageryProvider);
        const buildingTileset = await Cesium.createOsmBuildingsAsync();
        viewer.scene.primitives.add(buildingTileset);   
    </script>
    </div>
</body>

</html>

PS C:\Users\Administrator\Downloads\cesium-learn> http-server
Starting up http-server, serving ./

http-server version: 14.1.1    

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible    
AutoIndex: visible
Serve GZIP Files: false        
Serve Brotli Files: false      
Default File Extension: none   

Available on:
  http://172.30.32.1:8080
  http://192.168.1.104:8080
  http://192.168.202.1:8080
  http://192.168.8.1:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

[2024-11-20T01:44:35.268Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36"
(node:17632) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2024-11-20T01:44:36.409Z]  "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36"
[2024-11-20T01:44:36.413Z]  "GET /favicon.ico" Error (404): "Not found"
[2024-11-20T01:45:02.192Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36"
[2024-11-20T01:47:31.932Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36"

3.1.5 加载OSM数据

Cesium 提供了 OpenStreetMapImageryProvider 类来加载 OSM 数据，只需直接指定OSM数据 URL即可。另外，还可以通过 UrTemplatelmageryProvider 类构建 xyz 形式的 URL来求影像瓦片。加载 OSM 影像的效果如下图所示：

具体代码如下所示：

xyz形式

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

<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <title>cesium教程第三章数据加载之影像加载2</title>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">

        Cesium.Ion.defaultAccessToken = 'cesium的token';
        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: true,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false,
        });
        // 加载OSM数据
        const osmLayer = new Cesium.VectorTileLayer({
            url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            // 设置OSM的最大和最小缩放级别