CesiumJS使用详细，在vue中使用Cesium.js（WebGIS中的Cesium地图可视化应用）

快来打我* 2023-10-12 15:27 7阅读 0赞

#### 简述：Cesium是一种基于WebGL开源的虚拟地球技术，可以用于构建高性能、跨平台的三维地球应用程序，它支持多种数据格式和地图服务，可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件，方便开发者进行二次开发和定制化，且可免费商用，在航空航天、国防、城市规划、教育等领域得到了广泛应用。 ####

**1、 首先，我们要想在项目中使用cesium，需要在项目中安装Cesium.js，可以通过npm实现**

npm install cesium    
    //或    
    npm install cesium --save
    
    //两个执行命令，意思相同。
    //安装依赖时，不带 -XX 时，默认安装在开发环境中,也就是dependencies下，上线后的依赖；

**--save、--save-dev、--global的区别和各自的含义：**

**[\--save、--save-dev、--global使用详细![icon-default.png_t_N5F7][]https://blog.csdn.net/weixin\_65793170/article/details/128267888?ops\_request\_misc=&request\_id=af83ae7c40fc4193bea53942c566240c&biz\_id=&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~blog~koosearch~default-1-128267888-null-null.268%5Ev1%5Econtrol&utm\_term=save&spm=1018.2226.3001.4450][--save_--save-dev_--global_icon-default.png_t_N5F7_https_blog.csdn.net_weixin_65793170_article_details_128267888_ops_request_misc_request_id_af83ae7c40fc4193bea53942c566240c_biz_id_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_koosearch_default-1-128267888-null-null.268_5Ev1_5Econtrol_utm_term_save_spm_1018.2226.3001.4450]**

**2、下载完成后，可以在package.json中，dependencies依赖环境下，可以看到该依赖，如下：**

![e9987152a36f477a9d304542a0b123dd.png][]

**3、然后在 node\_modules文件中找到cesium文件（路径：node\_modules > cesium > build > Cesium）这里需要用到****build文件下cesium文件中的widgets.css和Cesium.js****，所以直接复制****粘贴在public文件中****；**

![61932a79f56d400db131e3400d85550f.png][]

**4、然后在public文件下的index.html文件中引入widgets.css和Cesium.js文件；**

![40b2114b03884ee89f57cb59f3593309.png][]

**5、这样就可以在vue页面直接使用了。（目前只找到这种引入方式，有main.js引入方式的可以分享一下）**

![379dd77c4ba84082b32374246a6e8f13.png][]

**控制台输出：**

![4e2f7b8979ab494fb54d8e0219069e33.png][]

**6、 这里初始化一个cesium地球视图，新建一个cesium.js文件，然后再里面导出初始化地球视图函数，这里需要用到Access Tokens，就是cesium的访问令牌，每一个使用cesium的用户都需要自己注册创建，注册方法下面；**

// 初始化cesium地图 JS文件
    // 首先获取Cesium API
    const Cesium = window.Cesium;
    let viewer = null;
    /**
     * 初始化地球视图函数
     */
    function initCesiumMap(dom) {
      // 配置cesium专属Access Tokens,就是cesium的访问令牌，每一个使用cesium的用户都需要自己注册，然后获取自己的Access Tokens；
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
      viewer = new Cesium.Viewer(dom, {
        animation: false, // 是否显示动画控件
        baseLayerPicker: true, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: true, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: true, // 是否显示全屏按钮
        selectionIndicator: true, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        terrainProvider: Cesium.createWorldTerrain({
          // 光照阴影
          requestVertexNormals: true,
          // 水流效果
          requestWaterMask: true
        }), // 显示地形
        // terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不显示地形
      })
    
      // 去掉logo
      viewer.cesiumWidget.creditContainer.style.display = "none";
    
    }
    // 导出
    export { Cesium, viewer, initCesiumMap };

**在vue页面引入使用，**

import { initCesiumMap } from "../../../utils/cesium/cesium.js";
    
    //在函数中调用initCesiumMap地图方法，并把id为cesium_map的html元素传递过去；
    mounted() {
        initCesiumMap("cesium_map");
    },
    
    //当然，别忘了定义html元素
    <div id="cesium_map"></div>
    //并设置宽高
    #cesium_map {
        width: 100%;
        height: 100%;
    }

**运行效果如下：**  
![c28aa3259b5b49f08205700b4145e055.gif][]

**7、 在这里注册cesium，获取Access Tokens，**

[Cesium注册![icon-default.png_t_N5F7][]https://ion.cesium.com/signup/][Cesium_icon-default.png_t_N5F7_https_ion.cesium.com_signup]

**注册完成后，来到如下页面，在这里创建token：**

![f36607765d4f43488ec87755bd5de86f.png][]

**更多操作：**

[Cesium中文文档![icon-default.png_t_N5F7][]https://www.vvpstk.com/public/Cesium/Documentation/Animation.html][Cesium_icon-default.png_t_N5F7_https_www.vvpstk.com_public_Cesium_Documentation_Animation.html]

**更多详见：**

[Cesium官方网站![icon-default.png_t_N4P3][]https://www.cesium.com/][Cesium_icon-default.png_t_N4P3_https_www.cesium.com]

[icon-default.png_t_N5F7]: https://csdnimg.cn/release/blog_editor_html/release2.3.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N5F7
[--save_--save-dev_--global_icon-default.png_t_N5F7_https_blog.csdn.net_weixin_65793170_article_details_128267888_ops_request_misc_request_id_af83ae7c40fc4193bea53942c566240c_biz_id_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_koosearch_default-1-128267888-null-null.268_5Ev1_5Econtrol_utm_term_save_spm_1018.2226.3001.4450]: https://blog.csdn.net/weixin_65793170/article/details/128267888?ops_request_misc=&request_id=af83ae7c40fc4193bea53942c566240c&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~koosearch~default-1-128267888-null-null.268%5Ev1%5Econtrol&utm_term=save&spm=1018.2226.3001.4450
[e9987152a36f477a9d304542a0b123dd.png]: https://img-blog.csdnimg.cn/e9987152a36f477a9d304542a0b123dd.png
[61932a79f56d400db131e3400d85550f.png]: https://img-blog.csdnimg.cn/61932a79f56d400db131e3400d85550f.png
[40b2114b03884ee89f57cb59f3593309.png]: https://img-blog.csdnimg.cn/40b2114b03884ee89f57cb59f3593309.png
[379dd77c4ba84082b32374246a6e8f13.png]: https://img-blog.csdnimg.cn/379dd77c4ba84082b32374246a6e8f13.png
[4e2f7b8979ab494fb54d8e0219069e33.png]: https://img-blog.csdnimg.cn/4e2f7b8979ab494fb54d8e0219069e33.png
[c28aa3259b5b49f08205700b4145e055.gif]: https://img-blog.csdnimg.cn/c28aa3259b5b49f08205700b4145e055.gif
[Cesium_icon-default.png_t_N5F7_https_ion.cesium.com_signup]: https://ion.cesium.com/signup/
[f36607765d4f43488ec87755bd5de86f.png]: https://img-blog.csdnimg.cn/f36607765d4f43488ec87755bd5de86f.png
[Cesium_icon-default.png_t_N5F7_https_www.vvpstk.com_public_Cesium_Documentation_Animation.html]: https://www.vvpstk.com/public/Cesium/Documentation/Animation.html
[icon-default.png_t_N4P3]: https://csdnimg.cn/release/blog_editor_html/release2.3.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N4P3
[Cesium_icon-default.png_t_N4P3_https_www.cesium.com]: https://www.cesium.com/