Cesium(1)-入门教程，创建一个纯净的地球
2019-01-25 本文已影响15人
WebGis学习笔记
创建你的Cesium第一个程序
CesiumJS是一个用于Web上3D地图的JavaScript库。铯离子是您发现3D内容和平铺您自己的数据流的中心。CesiumJS和ion协同工作，使您能够构建世界一流的3D制图应用程序。
首先Cesium和Arcgis for js 的创建方式一样我们要创建一个容器用来放置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>
有了容器之后我们需要引入地图开发所需要的依赖（JS库和CSS库）这里以1.53为例（目前最新）如果想使用别的版本可以上官网查看。
<script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
有了容器和依赖之后我们来创建一个地图。（将地图和容器相互关联）
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMTk4ZTYyNy00MjkxLTRmZWYtOTg1MS0wOThjM2YzMzIzYzEiLCJpZCI6NzEyMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0ODMxNzI5OX0.rKV8Ldl_bgR3lVvNsbHhTX62j8JH8ADCIWAwk7tXpr8';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
运行效果
API:API文档
API文档
如果大家觉得编写的组件有点多，想去掉可在在创建地图的构造函数中标记隐藏删除。
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 href="https://cesiumjs.org/releases/1.53/Build/Cesium/Widgets/widgets.css" 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>
