本文基于vue/cli 4创建的vue3项目，初始文件配置请参照：https://www.yuque.com/wangminger/khiw12/kt2650

1. 全部控件

image.png
image.png

  1. Geocoder：查找位置工具，可以搜索具体位置，搜索后对对准到具体位置，默认使用地图为bing
  2. Home Button：点击返回到初始位置
  3. Scene Mode Picker：选择视角模式，可选模式为3D，2D和俯视图形
  4. Base Layer Picker：图层选择器，选择要显示的图层
  5. Navigation Help Button：导航帮助按钮
  6. Animation：动画器件，控制动画的播放速度
  7. Credits Display：版权显示，无token必显示，通过加载别的图层，比如天地图等
  8. Timeline：时间线，指定当前时间，并允许用户跳到指定时间点
  9. Fullscreen Button：全屏显示按钮

2. 代码配置

将cesium相关内容放置到一个js下:

注：本文及后续对cesium的实例创建都采用按需加载方式

全部引入方式：

  1. // cesium.js
  2. import "cesium/Build/Cesium/Widgets/widgets.css";
  3. import * as Cesium from "cesium";
  5. //默认cesium显示配置，本配置直接隐藏所有控件
  6. const defaultCesiumConifg = {
  7.     geocoder: false,                //查找位置工具
  8.     homeButton: false,              //返回初始位置按钮
  9.     sceneModePicker: false,         //视角选择器
  10.     baseLayerPicker: false,         //图层选择器
  11.     navigationHelpButton: false,    //导航帮助按钮
  12.     animation: false,               //动画控制器
  13.     timeline: false,                //时间线
  14.     fullscreenButton: false,        //全屏控制
  15. };
  17. const initCesium = function(containerId, config=defaultCesiumConifg) {
  18.       const viewer = new Cesium.Viewer(containerId, config);
  19.       viewer._cesiumWidget._creditContainer.style.display = "none";    //隐藏版权信息
  20.     return viewer;
  21. }
  23. export {
  24.     initCesium,
  25. }

按需加载方式：

  1. // cesium.js
  2. import "cesium/Build/Cesium/Widgets/widgets.css";
  3. import {Viewer} from 'cesium';
  5. //默认cesium显示配置，本配置直接隐藏所有控
  6. const defaultCesiumConifg = {
  7.     geocoder: false,                //查找位置工具
  8.     homeButton: false,              //返回初始位置按钮
  9.     sceneModePicker: false,         //视角选择器
  10.     baseLayerPicker: false,         //图层选择器
  11.     navigationHelpButton: false,    //导航帮助按钮
  12.     animation: false,               //动画控制器
  13.     timeline: false,                //时间线
  14.     fullscreenButton: false,        //全屏控制
  15. };
  17. const initCesium = function(containerId, config=defaultCesiumConifg) {
  18.       const viewer = new Viewer(containerId, config);
  19.       viewer._cesiumWidget._creditContainer.style.display = "none";    //隐藏版权信息
  20.     return viewer;
  21. }
  23. export {
  24.     initCesium,
  25. }
  1. // App.vue
  2. ...
  3. <template>
  4.     <div id="map"></div>
  5. </template>
  6. <script>
  7. import {initCesium} from './cesium.js';
  9. export default {
  10.     mounted() {
  11.       initCesium('map');                                                            //初始化cesium球
  12.   }
  13. }
  14. </script>

效果展示：
image.png

参考文档：http://cesium.xin/wordpress/archives/58.html