以及本项目的github:https://github.com/dewjiguang/cesium.git
下面介绍本项目中的所学,希望能帮到您。
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交流群问了群里的大佬才知道。所以学习这种较为冷门的新知识的时候要找一个组织共同学习。
这是我遇到的一个难点,cesium支持的格式有很多,不同的格式呀有不同的加载方式,
<!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就代表高度了,可以试着调一下高度或者缩放比例,
编辑–》样式模板–》现有模板–》选中刚才建的模板–》确定,确定后结果就是这样的
(这里简单提一下:最开始我和老师时使用arcgis的toolbox工具导出kml,但那样其实很麻烦,首先arcgis比较难装(破解教程超级麻烦),其次有可能装好了后没有quick导出功能(为了这个功能我还专门去淘宝找人帮我远程装软件,还是两次,每次20块啊),装好后转化的步骤也很麻烦(arcgis导出具体可以看这里:http://www.studiosmuts.com/ceed3/arcmap_gis-to-3d/) 综合来说还是谷歌地球这条路方便一些,而且kml本就是googleearth定义的,用它来导出也更放心一点)
上述是kml格式数据的转化与加载,下面再介绍一下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' });
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网址在这里