博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ceisum官方教程1 -- 开始
阅读量:6479 次
发布时间:2019-06-23

本文共 1161 字,大约阅读时间需要 3 分钟。

原文地址:

学会使用全球地形、影像、3d tile(模型切片)、地理编码创建一个Cesium程序。
CesiumJS是一个基于javascript的浏览器器3d地图引擎。Cesium ion是一个3d内容的发布中心并且可以把你自己的数据进行切片、发布服务。CesiumJS和 ion 配合起来可以创建世界级3d地图程序。
Ceisum官方教程1 -- 开始
3D数据经过ion或者cesiumlab进行处理,并且在cesiumjs中可视化.
第一个程序
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<script src=";
<link href="" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
注意:
如果你登陆cesium ion之后,可以用你自己的access token 替换代码里的。
所有web程序需要一个web服务器,CesiumJS也不例外。为了简单,这个教程跳过本地服务器的搭建,使用Glitch 和 一个在线的IDE做程序开发。点击这里创建一个glitch项目。Glitch加载之后,忽略模板提示,直接点击index.html 删除整个内容,把上面的代码粘贴过去。
点击
Ceisum官方教程1 -- 开始
按钮,它会打开一个新窗口,并显示了Cesium的程序。修改代码后,这个弹出窗口会自动刷新。
Ceisum官方教程1 -- 开始
Glitch预览界面
代码分析:
在HTML的head标签内包含CesiumJS的库引用
<script src=";
<link href="" rel="stylesheet">
创建一个HTML标签去承载CesiumJS控件(widget):
Ceisum官方教程1 -- 开始
从你的ion账户提供一个token去访问Bing影像底图:
Ceisum官方教程1 -- 开始
最后,创建一个名为Viewer的Cesium控件,并且让他去使用上面定义的HTML元素:
Ceisum官方教程1 -- 开始
添加Cesium全球地形
Cesium全球地形是一个高精度地形库,在你的ion账户里已经有访问权限。用下述代码替换我们做的第一个示例里的创建Viewer的部分:
Ceisum官方教程1 -- 开始
下来我们在预览界面缩放到特定位置,比如“Grand Canyon, AZ”,就看到如下图效果:
Ceisum官方教程1 -- 开始
Grand Canyon的10米精度地形
Ceisum官方教程1 -- 开始

转载于:https://blog.51cto.com/14117342/2327029

你可能感兴趣的文章
spring3.0.7中各个jar包的作用总结
查看>>
Windows 10 /win10 上使用GIT慢的问题,或者命令行反应慢的问题
查看>>
Windows平台分布式架构实践 - 负载均衡
查看>>
iOS自定制tabbar与系统的tabbar冲突,造成第一次点击各个item图片更换选中,第二次选中部分item图片不改变...
查看>>
SVN服务器使用(二)
查看>>
反射获取内部类以及调用内部类方法
查看>>
App里面如何正确显示用户头像
查看>>
U-BOOT之一:BootLoader 的概念与功能
查看>>
我的路上
查看>>
Velocity处理多余空白和多余空白行问题
查看>>
DB2与oracle有什么区别
查看>>
创建一个多级文件目录
查看>>
Picasa生成图片幻灯片页面图文教程
查看>>
svn status 显示 ~xx
查看>>
常用HiveQL总结
查看>>
[转]使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(三)-- Logger
查看>>
POJ 3311 Hie with the Pie(状压DP + Floyd)
查看>>
Security updates and resources
查看>>
DNS为什么通常都会设置为14.114.114.114
查看>>
Sqoop架构(四)
查看>>