Cesium官方教程1:开始

    本文转载自:https://www.jianshu.com/p/d89ff3e7c4dc

    官方教程原文地址:https://cesium.com/docs/tutorials/getting-started/

    学会使用全球地形、影像、3D Tiles(模型切片)、地理编码创建一个Cesium程序。

    CesiumJS是一个基于javascript的Web端3D地图引擎。Cesium ion是一个3d内容的发布中心,并且可以把你自己的数据进行切片、发布服务。CesiumJS和 ion 配合起来可以创建世界级3D地图程序。

  3D数据经过Cesium ion或者cesiumlab进行处理,并且在cesiumjs中可视化。

一、你的第一个应用程序

    代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmMyMGJkZi1lZGNiLTRjZWUtYjg5Mi0zOGQ0NDNkNTNlNzYiLCJpZCI6MTMyNzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI5MTY1MTd9.1kWwUft1-Vk2ztF4_rwkYmibN6w-tAAQmP4O2qw34mw';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

    你的Cesium ion账户:如果你登陆cesium ion之后,可以用你自己的access token 替换代码里的。

    所有web程序需要一个web服务器,CesiumJS也不例外。为了简单,这个教程跳过本地服务器的搭建,使用Glitch 和 一个在线的IDE做程序开发。点击这里创建一个glitch项目。Glitch加载之后,忽略模板提示,直接点击index.html 删除整个内容,把上面的代码粘贴过去。

    点击

    按钮,它会打开一个新窗口,并显示了Cesium的程序。修改代码后,这个弹出窗口会自动刷新。

Hello World!

    CesiumJS默认呈现你的ion账户提供的Bing影像地图。

二、分析代码

    在HTML的head标签内包含CesiumJS的库引用

<script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    创建一个HTML标签去承载CesiumJS控件(widget)

<div id="cesiumContainer"></div>

    从你的ion账户提供一个token去访问Bing影像底图

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmMyMGJkZi1lZGNiLTRjZWUtYjg5Mi0zOGQ0NDNkNTNlNzYiLCJpZCI6MTMyNzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI5MTY1MTd9.1kWwUft1-Vk2ztF4_rwkYmibN6w-tAAQmP4O2qw34mw';

    最后,创建一个名为Viewer的Cesium控件,并且让他去使用上面定义的HTML元素

var viewer = new Cesium.Viewer('cesiumContainer');

三、添加Cesium全球地形数据

    Cesium World Terrain是一个高精度地形库,在你的ion账户里已经有访问权限。

    用下述代码替换我们做的第一个示例里的创建Viewer的部分:

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

    现在我们在预览界面缩放到特定位置,比如“Grand Canyon, AZ”,就看到如下图效果:

Cesium World Terrain

    Grand Canyon的10米精度地形

四、加载你自己的数据

    你可以将自己的数据上传到ion并将其切成3D Tiles,这是一种用于大规模异构3D地理空间数据流的开放规范。

    在本教程中,我们提供了一个包含单个建筑物的示例KML/COLLADA包,使用它来创建一个3D Tiles瓦片集,并将其添加到应用程序。点击这里下载。

    导航到ion,拖放刚才下载的文件AGI_HQ.kmz到页面上的任何位置,再点击上传(upload)

    一旦上传完成,ion将开始切割瓦片过程,并在右上角报告进度。完成切割后,在左侧选择新的数据,然后按下页面右小角示例代码旁边的copy按钮。在创建的Viewer行后面,将结果黏贴到Glitch中。

var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(your_asset_id)
    })
);

    将应用程序的默认view设置为tileset:

viewer.zoomTo(tileset)

3D Tiles

    加载到CesiumJS中的3D Tiles数据,你自己的数据看起来就是不一样!

    祝贺!你已经创建了你的第一个Cesium程序!

    以下是供参考的完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmMyMGJkZi1lZGNiLTRjZWUtYjg5Mi0zOGQ0NDNkNTNlNzYiLCJpZCI6MTMyNzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI5MTY1MTd9.1kWwUft1-Vk2ztF4_rwkYmibN6w-tAAQmP4O2qw34mw';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });

    var tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(your_asset_id)
        })
    );
    viewer.zoomTo(tileset);
  </script>
</body>
</html>

    接下来应该做什么?

    现在你已经知道了如何设置一个基本的Cesium应用程序,你可以浏览Sandcastle来探索所有的特性和一些常见的用例。

 

  • 3
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值