基于cesium的三维城市建筑可视化系统（shp数据导入cesium的三种可行方法）

最新推荐文章于 2025-05-11 00:00:00 发布

原创

最新推荐文章于 2025-05-11 00:00:00 发布

· 1.8w 阅读

179 ·

版权

文章标签：

#cesium #建筑可视化

基于cesium的三维城市建筑可视化系统

毕业快半个月了，一直想要把这次毕设所用到的cesium相关的内容记录下来，虽然可能以后也用不到了，但还是记录一下吧。由于过的时间已经有点长了，我尽量写。
简单介绍一下这次的基础和目的吧，我拿到了一个西安市的.shp格式的二维建筑轮廓文件，老师希望我开发一个可以进行三维展示的可视化系统，要有简单的统计功能，我最后做出来的功能包括根据高度改变颜色，鼠标左键右键中键点击事件，统计分析，详细信息展示等。
由于本人之前没有接触过cesium，所以在这几个月里踩了很多坑，中间一度进行不下去，最后还是磕磕绊绊的做了出来。希望这篇文章可以尽量帮助新手入门。先放一点成果展示：

在这里插入图片描述
以及本项目的github：https://github.com/dewjiguang/cesium.git
下面介绍本项目中的所学，希望能帮到您。

1，快速搭建一个cesium的平台环境

https://www.cnblogs.com/mazhenyu/p/6494748.html
上述搭建出一个可以运行的cesium地球就算成功了，但是需要注意的是（本人在这里卡住了好久，有个大坑）就是要加一个token，相当于一个个人认证吧，这个可以在cesium的官网进行申请，
官网地址：https://cesium.com/ion/signin

官网有一个很方便的功能就是可以上传它规定的数据，将其转化为3dtiles格式（cesium自己规定的一种格式），然后每次加载数据的时候通过下图这个code在线加载自己的数据：
在这里插入图片描述
当然，自己的数据必须要用自己的token才可以访问自己的数据。

在这里插入图片描述

如果不是自己的数据的话就无所谓了，要是嫌麻烦不想注册的话你也可以用我的token：
Cesium.Ion.defaultAccessToken=‘eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YzQ1YjI0NC05Nzg3LTQxOTQtYTBlMi1hNGMyMjVhYTJlODMiLCJpZCI6ODYyMCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MjM5MDU1MX0.6YczoUSHFcXfCuL5EAM7WWpld4Q5op-Lsc9HDYX1DgE’;
把上述这段加到body标签里就可以啦。
这是我踩的第一个坑，卡了我快半个月，后来加了某cesium交流群问了群里的大佬才知道。所以学习这种较为冷门的新知识的时候要找一个组织共同学习。

2.数据的格式及转化。

这是我遇到的一个难点，cesium支持的格式有很多，不同的格式呀有不同的加载方式，

kml格式应该这样加载：

<!DOCTYPE html>
<html lang="en">
<head>
<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="./Cesium/Cesium.js"></script>
<style>
@import url(./Cesium/Widgets/widgets.css);

html, body, #cesiumContainer {
   
    width: 100%;
    height:

最低0.47元/天解锁文章