Cesium 新旧版本加载影像与terrain高程

Cesium因为版本的原因，导致在加载高程数据时存在问题，以下记录一下解决方案。之前使用Cesium的时候版本是1.92，使用以下代码可正常加载显示影像和高程数据：

<!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>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
    @import url(../Build/Cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    const viewer = new Cesium.Viewer("cesiumContainer");

    const imageryLayers = viewer.imageryLayers;

    // 影像数据
    const imageryLayer = new Cesium.ImageryLayer(
      new Cesium.TileMapServiceImageryProvider({
        url: 'http://localhost/tms/mercator_img'
      })
    );

    // 高程数据
    const terrainProvider = new Cesium.CesiumTerrainProvider({
      // 高程layer.json上层url地址
      url: 'http://localhost/dem/test_dem',
      requestVertexNormals: true
    });

    viewer.imageryLayers.add(imageryLayer);
    viewer.terrainProvider = terrainProvider;
  </script>
</body>

</html>

后来更新版本到Cesium 1.116，再使用以上代码则发现无法加载显示影像和高程，查看官方文档，发现新版本的CesiumTerrainProvider需要使用await，通过官方实列代码修改终于解决该问题。

以下为Cesium 1.116版本的代码加载影像和高程：

<!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>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <script src="./Sandcastle/Sandcastle-header.js"></script>
  <style>
    @import url(../Build/Cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    // 创建Cesium视图器
    const viewer = new Cesium.Viewer('cesiumContainer');

    // 影像
    const wgs84_img = new Cesium.UrlTemplateImageryProvider({
      url: 'http://localhost/tms/mercator_img/{z}/{y}/{x}.png'
    });
    viewer.imageryLayers.addImageryProvider(wgs84_img);

    // 高程
    window.startup = async function (Cesium) {
      'use strict';

      try {
        viewer.scene.terrainProvider =
          await Cesium.CesiumTerrainProvider.fromUrl(
            // layer.json文件所在上层url地址
            "http://localhost/dem/test_dem",
          );
      } catch (error) {
        window.alert(`Failed to load terrain. ${error}`);
      } //Sandcastle_End
      Sandcastle.finishedLoading();
    };

    if (typeof Cesium !== 'undefined') {
      window.startupCalled = true;
      window.startup(Cesium).catch((error) => {
        "use strict";
        console.error(error);
      });
    }

  </script>
</body>

</html>

执行以上代码则正常加载显示影像和高程数据。

# html5 # webgl
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区