nodejs 查看下载文件路径_Cesium开发学习路径

Cesium.js是做三维地球建模可视化的前端库,网上的教程很多,官网文档和例子都非常详细,这里只是整理一下学习路径,以备后续不时之需。

一、中文网络资料

Cesium有一定的使用基数,所以搜索cesium中文教程有很多结果,有整理得很详细的中文网站:

Cesium中文网:http://cesium.coinidea.com/

Cesium中文网:cesium.xin/

Cesium资料大全:https://zhuanlan.zhihu.com/p/34217817,这里整理的资料很全,还有视频资料。

二、官方文档

最好的教程还应该是官方文档。

官网开发指南见:https://cesium.com/docs/

a234b52fdc0410888546ee63a32ef233.png

3d4f9085c8726ecc2f887eeb75cdb61e.png

b195dc8da36d32c09325b0fea6b9916d.png

Js api的文档见:

https://cesium.com/docs/cesiumjs-ref-doc/

cesium也提供了一个在线的代码编写调试并展示效果,查看选择例子的环境:

https://sandcastle.cesium.com/

6c06110dd7ddab6c74766412627ad75f.png

在这个平台上,写代码片段和CSS设置即可,页面完成之后,可以save as为HTML文件,或share为网址。

三、资料下载

国内访问cesium很慢,没关系,可以把资料下载到本地。

https://cesium.com/downloads/

bd165e78cb6d51b06d14bd7a8c2a700c.png

这个下载文件里,除了cesium.js和开发文档外,还有本地化的sandcastle,可以在本地查看cesium的例子,并编写代码。

但下载的文件必须经过编译才能运行。

首先确保电脑安装了nodejs环境。

打开cmd,将路径切换到文件解压后的路径下,既server.js所在的路径下。

0dcad1c26210fa5f580ecb47cbf1e447.png

在路径下,运行命令:node server.js

375cfe6261a3bd75ae155018deb9ebda.png

按照提示,访问本地网址即可:

http://localhost:8080/

264dbe9ae91d3f2983690062d6679b1d.png

可以从hello world开始cesium入门:http://localhost:8080/Apps/HelloWorld.html

因为数据还需要从cesium数据仓库中拉取,所以渲染还是会慢点,不过相对来说,open street map的数据加载会快很多,可以切换地图到open street map。

8b6580d44215c59e01237344267e6ba7.png

查看更多例子,或编写调试代码,可以访问:

http://localhost:8080/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases

在调试sandcastle的时候,也会遇到渲染加载很慢的情况,可以把底图切换为open street map,可以减少等待时间。

8b80bee9c14bcc5819c283037aa9be28.png

调试完成的页面需要保存的时候,要注意保存路径。

假设我把一个调试好的页面保存在Apps/Sandcastle/gallery/路径下,并命名为test.html。

4dae811284180e0704f1d6bf201974b6.png

我想要查看这个页面的效果,只需要输入如下网址即可,其中src=后面的就是test.html文件名。

http://localhost:8080/Apps/Sandcastle/index.html?src=test.html&label=Showcases

四、天地图三维地图

国内访问bing地图的三维地球的确是慢,可以有一个退而求其次的选择,用天地图的三维地图。

使用说明见:

http://lbs.tianditu.gov.cn/docs/#/sanwei/

天地图用的也是cesium的api,demo代码托管平台是:https://github.com/ngcc-tdt/demo

使用这个demo注意几点。

1.将index.html文件中的var token = '你的key';,修改一下,替换成在cesium平台生产的token,见:https://cesium.com/ion/tokens。

2.将index.html文件中的:

<script src="./static/cesium/Cesium.js"></script>

<link rel="stylesheet" type="text/css" href="./static/cesium/Widgets/widgets.css" />

改成:

<script src="static/cesium/Cesium.js"></script>

<link rel="stylesheet" type="text/css" href="static/cesium/Widgets/widgets.css" />

直接用浏览器打开index.html即可查看效果。

a333b5008f00f54ec37332ff37d2a8c5.png

五、总结

1.Cesium的中文教程很多。

2.cesium官网访问起来比较慢,可以将资料下载到本地,进行查阅和代码编写。

3.bing三维地图访问渲染很慢,可以切换成open street map或天地图。

4.实践。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值