Cesium入门02-第一个球

最新推荐文章于 2025-04-24 10:25:21 发布

NaHS_031

最新推荐文章于 2025-04-24 10:25:21 发布

阅读量1.3k

点赞数

分类专栏： Cesium 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/weixin_40289902/article/details/104413459

版权

Cesium 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用Cesium进行地图编辑，包括编辑器的安装配置、创建首个三维地球模型、修改默认控件及图层切换至ESRI图层的全过程。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

··如题，这篇文章分四部分：
1、编辑器的安装和使用
2、第一个球-‘HelloWorld’的诞生。
3、球的默认控件的变更。
4、球体默认图层的变更。（这里以‘必应图层’=>‘ESRI图层’为例）

一、编辑器安装和使用

①本地端

我用VS code(Visual Studio Code)，进入官网下载，安装时一律打√。
打开软件，安装Live server扩展。
在这里插入图片描述
编辑完成后右键选择Open with Live Server选项

网页刷新查看结果。

②网页端Glitch

我没有过多经验，自己可以去尝试一下。

二、第一个球的诞生

默认使用的是bing图层，这里换一下ESRI图层展示：
插入默认模板后，添加Cesium.js和widget.css表（在Cesium文夹下的Build文件夹中，基本路径同下所示），添加Viewer方法；

  <script src="./scripts/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
  <div id='CesiumContainer' style="height: 100%;"></div>
  <script>
  	var viewer = new Cesium.Viewer('CesiumContainer');
  </script>

在这里插入图片描述

三、默认控件的变更

首先介绍一下基础界面的控件的添加和隐藏：
打开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图层
    })
    });