基于cesium的三维城市建筑可视化系统（shp数据导入cesium的三种可行方法）
基于cesium的三维城市建筑可视化系统
-
-
- 1，快速搭建一个cesium的平台环境
- 2.数据的格式及转化。
- kml格式应该这样加载：
- 3dtiles
- 第三种文件格式geojson
-
毕业快半个月了，一直想要把这次毕设所用到的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: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<div id="toolbar"></div>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
<!--Cesium.BingMapsApi.defaultKey ='AvzM4FgDkpuZwkwP9DPDUwq15NUTJxHNyyUHGSXiA9JwAtAinnlPS31PvwB3hcWh';-->
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YzQ1YjI0NC05Nzg3LTQxOTQtYTBlMi1hNGMyMjVhYTJlODMiLCJpZCI6ODYyMCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MjM5MDU1MX0.6YczoUSHFcXfCuL5EAM7WWpld4Q5op-Lsc9HDYX1DgE';
<!--var promise = Cesium.KmlDataSource.load('data.kml');-->
<!--viewer.dataSources.add(Cesium.KmlDataSource.load('bikeRide.kml',options));-->
var viewer = new Cesium.Viewer('cesiumContainer');
var options = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas
};
Sandcastle.addToolbarMenu([
{
text : 'gx KML extensions - Bike Ride',
onselect : function() {
viewer.dataSources.add(Cesium.KmlDataSource.load('/bikeRide.kml', options)).then(function(dataSource){
viewer.clock.shouldAnimate = false;
var rider = dataSource.entities.getById('tour');
viewer.flyTo(rider).then(function(){
viewer.trackedEntity = rider;
viewer.selectedEntity = viewer.trackedEntity;
viewer.clock.multiplier = 30;
viewer.clock.shouldAnimate = true;
});
});
}
}], 'toolbar');
Sandcastle.reset = function() {
viewer.dataSources.removeAll();
viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
};
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
上面这个kml就是我通过googleearth转化得到的，这里提一下，我的原始数据是.shp数据，我走了好几条数据转化路线，这里就是成功的一条，下面简单介绍一下googleearth将.shp转化为kml（kmz）
打开谷歌地球，文件–>导入–》格式选择.shp–》选中文件–》否
在临时位置这里将图层选中，得到一个二维平面图层
编辑–》样式模板–》新建样式模板
将数据的高程字段设为高度字段，我这里floor就代表高度了，可以试着调一下高度或者缩放比例，
编辑–》样式模板–》现有模板–》选中刚才建的模板–》确定，确定后结果就是这样的
然后点保存，得到kml（kmz）文件。
（这里简单提一下：最开始我和老师时使用arcgis的toolbox工具导出kml，但那样其实很麻烦，首先arcgis比较难装（破解教程超级麻烦），其次有可能装好了后没有quick导出功能（为了这个功能我还专门去淘宝找人帮我远程装软件，还是两次，每次20块啊），装好后转化的步骤也很麻烦（arcgis导出具体可以看这里：http://www.studiosmuts.com/ceed3/arcmap_gis-to-3d/） 综合来说还是谷歌地球这条路方便一些，而且kml本就是googleearth定义的，用它来导出也更放心一点）
上述是kml格式数据的转化与加载，下面再介绍一下3dtiles格式的转化与应用：
3dtiles
shp转化3dtiles使用一个工具，是cesium官方提供的，功能很强大，需要下载，软件的名字叫做cesiumlab
这里请读者自行搜索下载
打开软件后选择中间的这个建筑物矢量处理，按照提示操作就可以得到3dtiles格式啦，详细步骤可以看这里：https://blog.csdn.net/dyxcome/article/details/86532597
这里再说一下，这个cesiumlab是真的强大，官方出品必属精品，他同时支持好几种格式的转化，但我们这里就只用了这一种功能。
这里提供一个网站:https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=3D%20Tiles%20Feature%20Styling.html
里面是官方提供的cesium沙盒，可以在线修改，也可以把代码拷到本地运行，只不过有的时候进去会发现里面的demo跑出来都是黑的，具体什么原因我也不太清楚，可能看人品吧。这里面的绝大多数的数据加载都是加载的3dtiles，但是他没有直接写文件路径和文件名，而是写了个代号，比如说这个：
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5741) });
这里的5741其实就是cesium提供的在线加载的某个建筑数据，我们上述所说的个人数据里的code也是用这种方式的，但是如果我们要加载自己的数据要怎么写呢？这里是我遇到的另一个问题，困扰了我好久。
这里说一下3dtiles的文件格式，他大概是这个样子的：
一个文件夹下有好多个子文件夹，一集一个.json文件，所以我们加载的时候直接加载这个json就可以了
var tileset = new Cesium.Cesium3DTileset({ url: 'data/3dtiles/tileset.json' });
第三种文件格式geojson
cesium同时也支持Geojson文件格式（注意区别于普通的json），这种格式的好处是只有一个json文件，文件的格式很清晰，符合json的键值对对应的特点，这里使用这个在线转化器得到Geojson：
https://mapshaper.org/
以及一个加载Geojson格式的例子：
Hello World!
以上就是我这次毕设中探索出的三条使用shp数据转化成cesium可用的数据并加载的技术路线。
最后再提供一点在这个过程中我搜集的一些资料吧。
官方api文档：https://cesiumjs.org/Cesium/Build/Documentation/
一个学习cesium结构的很好的例子：https://www.jianshu.com/p/24ffa692aac3
一个实用的数据可视化工具（还支持地球显示哦）：https://echarts.baidu.com/examples/#chart-type-globe
cesium官方制作的一个高大上的例子：https://cesiumjs.org/NewYork/index.html?view=-74.00137290241591%2C40.71073017289542%2C888.4132973771704%2C18.955130605047422%2C-21.424922167642954%2C0.06394177048716491
以及一点建议：
1.建议不要用命令行的node server.js来启动程序，因为那个也就能运行个helloworld了，每次改还要用记事本来打开，开发的话还是放到开发平台上才舒服，我这里用eclipse来写的，服务器用的tomcat，而且不要用eclipse自带的浏览器来看结果，而是复制链接到谷歌浏览器上来看。
2.这就是一个纯前端的东西，一个html就能显示结果，我的这个是一个html做底板，上面嵌了几个html，互相传参。
3.上面提供的那个沙盒非常有用，demo都是从上面拷的，根据需求略作改变变成自己的。
最后，放一张图片，这是我某次实在是卡主做不下去了，一气之下给cesium创始团队发的求助信，还挺佩服当时的自己的，以此纪念这次毕设吧。
10.31更新：最近偶然间发现了个三维建筑的网站，试了下他们的demo，简直是太强大了，不仅能看能展示，还能第一人称在建筑内部浏览,wasd控制方向，跟打游戏一样，惊了，demo网址在这里