創(chuàng)建你的Cesium第一個程序
CesiumJS是一個用于Web上3D地圖的JavaScript庫。銫離子是您發(fā)現(xiàn)3D內(nèi)容和平鋪您自己的數(shù)據(jù)流的中心嚎杨。CesiumJS和ion協(xié)同工作，使您能夠構(gòu)建世界一流的3D制圖應(yīng)用程序发侵。
首先Cesium和Arcgis for js 的創(chuàng)建方式一樣我們要創(chuàng)建一個容器用來放置Cesium地圖交掏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
有了容器之后我們需要引入地圖開發(fā)所需要的依賴（JS庫和CSS庫）這里以1.53為例（目前最新）如果想使用別的版本可以上官網(wǎng)查看。
<script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet">
有了容器和依賴之后我們來創(chuàng)建一個地圖刃鳄。（將地圖和容器相互關(guān)聯(lián)）
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMTk4ZTYyNy00MjkxLTRmZWYtOTg1MS0wOThjM2YzMzIzYzEiLCJpZCI6NzEyMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0ODMxNzI5OX0.rKV8Ldl_bgR3lVvNsbHhTX62j8JH8ADCIWAwk7tXpr8';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
運(yùn)行效果
API文檔
如果大家覺得編寫的組件有點(diǎn)多盅弛，想去掉可在在創(chuàng)建地圖的構(gòu)造函數(shù)中標(biāo)記隱藏刪除。
var viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
shadows: true, //影子
infoBox: false
});
純凈地球
全部編碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet">
<style>
body{
margin:0px;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMTk4ZTYyNy00MjkxLTRmZWYtOTg1MS0wOThjM2YzMzIzYzEiLCJpZCI6NzEyMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0ODMxNzI5OX0.rKV8Ldl_bgR3lVvNsbHhTX62j8JH8ADCIWAwk7tXpr8';
// var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
shadows: true, //影子
infoBox: false
});
//viewer.scene.debugShowFramesPerSecond = true; //顯示幀率
</script>
</body>
</html>
