开源三维GIS之Cesium环境搭建(一)

最新推荐文章于 2024-10-17 22:08:54 发布

yGIS

最新推荐文章于 2024-10-17 22:08:54 发布

阅读量2w

点赞数 3

分类专栏： Cesium

本文链接：https://blog.csdn.net/u010608964/article/details/81634886

版权

Cesium 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用Cesium搭建三维GIS环境，包括安装配置过程及常见问题解决方法。Cesium是一款基于JavaScript和WebGL的开源3D地图引擎。

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

之前一直在做三维GIS方面的开发，使用的是睿城传奇的stampGIS，目前该三维GIS平台支持IE浏览器，在大规模三维场景渲染方面速度还可以。业余时间也查阅了相关三维方面的GIS平台，特别是开源方面，其中Cesium表现比较突出，所以花了点时间学习一下。

Cesium是基于JavaScript编写的，使用WebGL的地图引擎，一款开源3DGIS的js库。无插件支持多种浏览器，IE，Chrome,火狐等，目前最新版本的Cesium版本为4.8。下面来学习一下Cesium环境的搭建。这里我们使用的服务器是tomcat，版本为9.0.0。从github上下载最新版本的Cesium，整个文件的结构如下图所示。

将Build整个目录拷贝到tomcat的webapp项目工程，这里将Build修改为CesiumAPI了，当然可以根据自己的需要，进行修改。具体如下图所示。

在index.html页面中添加Ceisum的javascript脚本和css样式，这里只是简单的做了展现球的测试。具体代码如下。

<!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="CesiumAPI/Cesium/Cesium.js"></script>
  <style>
      @import url(CesiumAPI/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>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

最后的测试效果如下。