创建Cesium+vue2+iview脚手架

本文将创建一个cesium-vue2版本的脚手架。软件版本如下：

Cesium：1.103.0

vue：2.6.14

UI库view-design：4.7.0

 集成后显示效果如下，功能测试完好。

 1.新建vue项目

npm install @vue/cli -g   // 全局安装vue cli构建工具
vue create <my-project>   // 创建项目，<my-project>为自定义项目名称  或使用vue ui可视化创建
npm install //进入项目目录，安装相关组件
npm run serve // 开发环境运行项目，热部署

 2.安装cesium和view-design

npm install view-design@4.7.0
npm install cesium@1.103.0

 3.配置webpack文件

const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

let cesiumSource = "./node_modules/cesium/Source/";
const cesiumWorkers = "../Build/Cesium/Workers";

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "/",
  outputDir: "dist", // 输出文件目录
  lintOnSave: false, // eslint 是否在保存时检查 关闭语法检查

  configureWebpack: {
    output: {
      sourcePrefix: " ",
    },
    amd: {
      toUrlUndefined: true,
    },
    resolve: {
      alias: {
        "@": path.resolve("src"),
        cesium: path.resolve(__dirname, "./node_modules/cesium/"),
      },
      fallback: { https: false, zlib: false, http: false, url: false },
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
          { from: path.join(cesiumSource, "Assets"), to: "Assets" },
          { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
          { from: path.join(cesiumSource, "ThirdParty"), to: "ThirdParty" },
        ],
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
    ],
    module: {
      rules: [
        {
          test: /\.geojson$/,
          loader: 'json-loader',
        },
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
        {
          test: /\.(glb|gltf)?$/,
          use: {
            loader: "url-loader",
          },
        },
      ],
    },
  },
})

 4.拷贝cesium到public文件夹

从node_modules中找到安装包cesium，将cesium/Bulid路径下的cesium文件夹拷贝到public目录下。

在public文件夹中的index.html文件中引入下面内容：

<link href="<%= BASE_URL %>Cesium/Widgets/widgets.css" rel="stylesheet" />

<script src="<%= BASE_URL %>Cesium/Cesium.js"></script>

5.创建初始化viewer组件

//创建组件名CesiumMap.vue

<template>
  <div id="cesiumContainer"></div>
</template>

<script>

export default {
  name: 'CesiumMap',
  data() {
    return {
      viewer: null
    }
  },

  mounted() {  // 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
    Cesium.Ion.defaultAccessToken = 'xxxxxxxx' //你的token
    this.viewer = new Cesium.Viewer("cesiumContainer", {
      animation: true,  //时间轴动画控件 
      baseLayerPicker: true,
      fullscreenButton: true,
      geocoder: true,  // 搜索功能
      homeButton: false, // home键值，返回初始地图
      infoBox: true,
      navigationHelpButton: false,    //是否显示右上角的帮助按钮 
      navigationInstructionsInitiallyVisible: true,  // 导航说明显示
      requestRenderMode: true,
      // maximumRenderTimeChange : 200,
      sceneModePicker: false,         //是否显示3D/2D选择器 
      sceneMode: Cesium.SceneMode.SCENE3D, //显示三维地图
      shouldAnimate: true, // 动画效果展示
      shadows: true, //光照后的阴影效果
      terrainProvider: Cesium.createWorldTerrain({
        requestVertexNormals: true,
        requestWaterMask: true, // 动态水流
      }),
      // terrainProvider: Cesium.createWorldTerrain(),
      timeline: true,                 //时间轴控件 
      vrButton: false,
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      }),

    });
    var scene = this.viewer.scene;
    scene.fxaa = false;
    scene.globe.maximumScreenSpaceError = 4 / 3;
    scene.globe.depthTestAgainstTerrain = true;
    scene.screenSpaceCameraController.maximumZoomDistance = 40000000;  //最大缩放级别
    scene.screenSpaceCameraController.minimumZoomDistance = 1;  //最小缩放级别
    this.viewer.cesiumWidget.creditContainer.style.display = "none"; //去cesium logo水印
    this.$store.commit("setViewer", this.viewer)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
</style>

6.App.vue引入viewer组件

<template>
  <div id="app">
    <CesiumMap />
  </div>
</template>

<script>
import CesiumMap from '../components/CesiumMap.vue';
export default {
  name: 'App',
  components: { CesiumMap },
}
</script>

<style></style>

7.vuex状态管理

初始化的viewer可能需要在不同的组件之间传递，因此对viewer应该使用状态管理确保任何其他组件都可以获取到viewer，基本逻辑如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    viewer: null
  },
  getters: {
    getViewer(state) {
      return state.viewer
    },
  },
  mutations: {
    setViewer(state, obj) {
      state.viewer = obj
    }
  },
  actions: {
  },
  modules: {
  }
})

8.效果展示