VueCli3集成Cesium-CFANZ编程社区

1. 简介

Cesium是一个地图可视化框架，只是支持三维场景<渲染三维地球>

Cesium中的图层分为两种：一种是普通图层，包含影像、线划等普通显示图层；还有一种是地形图层，用于真实的模拟地球表面的场景。

cesium中文网 http://www.cesium.xin/cesium/cn/Documentation1.62/

2. 首先引入cesium资源

第一种方式：直接引用在线文件

<script src="https://cesium.com/downloads/cesiumjs/releases/1.63.1/Build/Cesium/Cesium.js">          </script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.63.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

第二种方式：引用在离线文件

安装

npm install cesium --save

使用npm安装后并不能直接打包编译cesium库资源。原因是因为该库比较复杂。

安装成功后，我们就会在node_modules下找到cesium的资源

VueCli3集成Cesium_ide

咱们把cesium/Build/Cesium 文件夹直接拷贝到public下。

VueCli3集成Cesium_ide_02

然后在public/index.html 引入

<script src="/Cesium/Cesium.js" type="text/javascript"></script>
<link rel="stylesheet" href="/Cesium/Widgets/widgets.css">

组件中使用

这样在vue组件中就可以直接使用了，下面是我一个demo

<template>
  <div id="cesiumContainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    };
  },
  mounted() {
    console.log(window.Cesium, "Cesium--->>>");
    this.initCesium();
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        shouldAnimate: true,
        animation: true, // 是否创建动画小器件，左下角仪表
        baseLayerPicker: true, // 是否显示图层选择器
        fullscreenButton: true, // 是否显示全屏按钮
        geocoder: true, // 是否显示geocoder小器件，右上角查询按钮
        homeButton: true, // 是否显示Home按钮
        infoBox: true, // 是否显示信息框
        sceneModePicker: true, // 是否显示3D/2D选择器
        selectionIndicator: true, // 是否显示选取指示器组件
        timeline: true, // 是否显示时间轴
        navigationHelpButton: true, // 是否显示右上角的帮助按钮
        scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
        selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型，仅baseLayerPicker设为true有意义
        imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型，仅baseLayerPicker设为true有意义
        terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
        // imageryProvider: new Cesium.UrlTemplateImageryProvider({
        //   url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
        // }),
        fullscreenElement: document.body, // 全屏时渲染的HTML元素,
        useDefaultRenderLoop: true, // 如果需要控制渲染循环，则设为true
        targetFrameRate: undefined, // 使用默认render loop时的帧率
        showRenderLoopErrors: true, // 如果设为true，将在一个HTML面板中显示错误信息
        automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
        contextOptions: undefined, // 传递给Scene对象的上下文参数（scene.options）
        sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式为三维
        mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
        dataSources: new Cesium.DataSourceCollection(),
        // 需要进行可视化的数据源的集合
      });
      this.viewer.imageryLayers.get(0).brightness = 0.88;
      this.viewer.imageryLayers.get(0).contrast = 0.94;
      this.viewer.imageryLayers.get(0).hue = 0.48;
      this.viewer.imageryLayers.get(0).saturation = 1.4;
      this.viewer.imageryLayers.get(0).gamma = 0.46;
      // this.viewer._cesiumWidget._creditContainer.style.display = "none";
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      /* 设置相机最小高度 */
      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000;
      /* 设置相机最大高度 */
      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 14023;
    },
  },
};
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

效果：

VueCli3集成Cesium_前端_03

3. 下载源码，查看示例，调试

运行源码我们会发现有很多示例可以供我们选择，并且我们每当我们查看一个示例，在左边都会有该示例对应的JavaScript源代码和html代码。还是蛮方便的

Cesium的github地址 https://github.com/CesiumGS/cesium

克隆

git clone <Cesium源码远程地址>

克隆下来的源码目录

VueCli3集成Cesium_html_04

这里的Source文件夹就是里面的所有的资源示例，每个示例在里面都是一个类。

安装所需依赖

npm install

然后就是运行了

这里建议大家先

npm run build

然后再

npm start

要不然可能会有问题。
npm start之后就是下面这个样子了

VueCli3集成Cesium_ide_05

然后我们打开浏览器访问 http://localhost:8080/

VueCli3集成Cesium_html_06

这时候我们选择 Sandcastle 打开

VueCli3集成Cesium_ide_07

这就是Cesium里面所有的示例。

4. Sandcastle is not defined 问题

我是随便找了个示例，想试试效果，但是报了上面这个错
然后看了一下代码，Sandcastle这个东西是直接用的，当时我觉得是Cesium中内置的属性或者方法，引了包之后可以直接用的，但是还是报错了，最终在源码里面找到了答案

VueCli3集成Cesium_图层_08

就是这个文件(Sandcastle-header.js)，它是向window上挂载了这个属性，里面有很多方法，但是上面咱们引入的是npm install cesium的包，发现并没有Apps/Sandcastle/Sandcastle-header.js这些东西。所以我把源码中的Apps整个文件夹直接拷贝到项目public下了，然后在public/index.html文件中引入，问题解决~~~

VueCli3集成Cesium_图层_09

public/index.html

<script src="/Apps/Sandcastle/Sandcastle-header.js" type="text/javascript"></script>

所以在使用过程中，如果出现问题，就去源码中全局搜一下，应该就可以找到答案

VueCli3集成Cesium