Ceisum官方教程1 -- 開始
阿新 • • 發佈：2018-12-06
高精 mco mark 跳過 地形 裏的 var ner idg 原文地址：https://cesium.com/docs/tutorials/getting-started/
學會使用全球地形、影像、3d tile（模型切片）、地理編碼創建一個Cesium程序。
CesiumJS是一個基於javascript的瀏覽器器3d地圖引擎。Cesium ion是一個3d內容的發布中心並且可以把你自己的數據進行切片、發布服務。CesiumJS和 ion 配合起來可以創建世界級3d地圖程序。
3D數據經過ion或者cesiumlab進行處理，並且在cesiumjs中可視化.
第一個程序
代碼如下：
<!DOCTYPE html>
<html lang="en">
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
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 刪除整個內容，把上面的代碼粘貼過去。
按鈕，它會打開一個新窗口，並顯示了Cesium的程序。修改代碼後，這個彈出窗口會自動刷新。
Glitch預覽界面
代碼分析：
在HTML的head標簽內包含CesiumJS的庫引用
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
創建一個HTML標簽去承載CesiumJS控件(widget):
從你的ion賬戶提供一個token去訪問Bing影像底圖：
最後，創建一個名為Viewer的Cesium控件，並且讓他去使用上面定義的HTML元素：
添加Cesium全球地形
Cesium全球地形是一個高精度地形庫，在你的ion賬戶裏已經有訪問權限。用下述代碼替換我們做的第一個示例裏的創建Viewer的部分:
下來我們在預覽界面縮放到特定位置，比如“Grand Canyon, AZ”，就看到如下圖效果：
Grand Canyon的10米精度地形
學會使用全球地形、影像、3d tile（模型切片）、地理編碼創建一個Cesium程序。
CesiumJS是一個基於javascript的瀏覽器器3d地圖引擎。Cesium ion是一個3d內容的發布中心並且可以把你自己的數據進行切片、發布服務。CesiumJS和 ion 配合起來可以創建世界級3d地圖程序。
3D數據經過ion或者cesiumlab進行處理，並且在cesiumjs中可視化.
第一個程序
代碼如下：
<!DOCTYPE html>
<html lang="en">
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
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 刪除整個內容，把上面的代碼粘貼過去。
按鈕，它會打開一個新窗口，並顯示了Cesium的程序。修改代碼後，這個彈出窗口會自動刷新。
Glitch預覽界面
代碼分析：
在HTML的head標簽內包含CesiumJS的庫引用
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
創建一個HTML標簽去承載CesiumJS控件(widget):
從你的ion賬戶提供一個token去訪問Bing影像底圖：
最後，創建一個名為Viewer的Cesium控件，並且讓他去使用上面定義的HTML元素：
添加Cesium全球地形
Cesium全球地形是一個高精度地形庫，在你的ion賬戶裏已經有訪問權限。用下述代碼替換我們做的第一個示例裏的創建Viewer的部分:
下來我們在預覽界面縮放到特定位置，比如“Grand Canyon, AZ”，就看到如下圖效果：
Grand Canyon的10米精度地形
Ceisum官方教程1 -- 開始