··如题，这篇文章分四部分：
1、编辑器的安装和使用
2、第一个球-‘HelloWorld’的诞生。
3、球的默认控件的变更。
4、球体默认图层的变更。（这里以‘必应图层’=>‘ESRI图层’为例）
一、编辑器安装和使用
①本地端
建议使VS code(Visual Studio Code)，进入官网下载，安装时一律打√。
打开软件，下载Chinese和Live server扩展。
前者是编辑器的中文包，后者为了快速查看结果。
单击右键，选择Open with Live Server选项
这个便利在于更改完代码保存后，可直接在浏览器中刷新原网页看最新结果。
②网页端Glitch啦
打开网站注册账号：https://glitch.com（这个网站省去了自己整个服务器的麻烦）
1、创建script.js文件
/* If you're feeling fancy you can add interactivity
to your site with Javascript */
// prints "hi" in the browser's dev tools console
console.log("hi");
2、创建style.css文件
/* CSS files add styling rules to your content */
body {
font-family: helvetica, arial, sans-serif;
margin: 2em;
}
h1 {
font-style: italic;
color: #373fff;
}
3、就是我们的Html文件啦，内容参考下面的格式，只需要更改head部分，因为引用不同@_@。
<head>
<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>
二、第一个球的诞生
1.准备一个文件夹（这里我命名为AA）
2.将Cesium压缩包里的Build文件夹、HelloWorld.html复制AA中
3.把HelloWorld.html由
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
更改为
<script src="Build/Cesium/Cesium.js"></script>
<style>
@import url(Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
3.创建server.js文件，内容如下：
var http = require("http");
var express = require("express");
const path = require('path');
var app = express();
app.use(express.static(path.join(__dirname,'')));
app.listen(4111,()=>{ //4111是端口号，你可以更改成不影响后续操作的端口
console.log(`App listening at port 4111`)
})
当你准备好Build文件夹，server.js，以及要运行的html文件时，下一步要做的就是发布（这里选用nodejs，因为环境已经配置好）。
4、打开cmd，进入目录
$ npm install express //注：只需在第一次运行时使用
$ node server.js
5、打开html文件，就是熟悉的HelloWorld球了。
三、默认控件的变更
首先介绍一下基础界面的控件的添加和隐藏：
打开HelloWorld会有默认控件，下图的geocoder，homeButton分别对应不同的控件，这里列出的靠True和False控制，具体对应的控件有兴趣自己试试。
var viewer = new Cesium.Viewer('cesiumContainer',{
geocoder:true,
homeButton:true,
sceneModePicker:false,
baseLayerPicker:true,
navigationHelpButton:true,
animation:false,
creditContainer:"credit",
timeline:false,
fullscreenButton:true,
vrButton:true,
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
// negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
// positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
// negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
// positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
// negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
// }
// })
});
当然对于Viewer来说，还有许多属性和方法，有兴趣还是参考一下API文档：
（这里要感谢巨佬们的心情努力）
英文版：http://cesium.xin/cesium/en/Documentation1.62/
中文版：http://cesium.xin/cesium/cn/Documentation1.62/
下面列举一个例子->
四、图层的变更
参考一下API文档：
参照上述方法
var viewer = new Cesium.Viewer('cesiumContainer',{
baseLayerPicker:false,
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
//更改到Esri图层
})
});
那么就可以完成ESRI图层的显示了。
