【Cesium学习（二）】Cesium在Vue项目中搭建开发

前言

从进入公司后，公司的业务主要是城市建设，住建方面的webGL开发（高速公路，高架桥等等），主要使用的就是Cesium，主要开发环境就是使用的Vue和单页面开发，所以这次主要就开始如何在Vue项目中搭建使用Cesium。

开发环境： vue-cli4
Vue版本：2.6.10
Cesium版本：1.94.2
首先是使用Vue创建一个Vue项目，在这选择的是Vue2的版本，后面会讲到如何在Vue3中使用，其实之间没有什么区别，就是Vue3在一些cesium新的更新内容上兼容性会更好。

创建Vue项目

这里就不多说了！来到这的肯定对创建一个Vue项目那是没什么问题的，直接下一步

在Vue中安装Cesium

在Ceium官网中就可以看到，下载Cesium可以直接npm下载 官网下载地址

所以我们安装官网直接npm i进行下载

npm install cesium

我当前安装的是1.94.2版本，如果是1.8几的版本，在Vue2中可能会有一下小问题,下面会提到

在Vue中引入Cesium

安装完成之后就将cesium引入项目中使用

import * as Cesium from 'cesium'

这时启动后1.8几的版本会有一个报错

error  in ./node_modules/cesium/Source/ThirdParty/zip.js

由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法，webpack 默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。

下面安装loader

npm install @open-wc/webpack-import-meta-loader --save-dev

yarn add @open-wc/webpack-import-meta-loader --dev

npm 和 yarn 二选一，看你使用的是什么。

然后在vue.config.js中添加(在plugins[…]后面)

 module: {
      rules: [
      {
      test: /\.js$/,
      use: {
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]}

这时刷新启动就不会报错了

在组件中使用

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YmZkZTViZS1kMTNjLTQ5MTYtYWQ1ZS0....';
Cesium.Ion.defaultAccessToken = token;
let url = 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}';
export default {
    data() {
        return {
            map: {},
        };
    },
    components: {},
    created() {},
    beforeMount() {},
    mounted() {
        this.initMap();
    },
    computed: {},
    methods: {
        initMap() {
            new Cesium.Viewer('cesiumContainer', {
                // shouldAnimate:true,
                // baseLayerPicker:false,
                infoBox: false,
                //> 设置地图
                imageryProvider: new Cesium.UrlTemplateImageryProvider({ url }),
            });
        },
    },
};
</script>

首先是token的问题： 使用cesium的时候需要在官网申请一个key。先注册一个cesium账号，并在项目中使用你自己的token，这样后续如果你想要使用一些平台提供的案例功能的时候你就可以将其添加进自己cesium中的仓库通过id进行调用（例如：3DTiles等等。本节并未使用，后面将会用到。）


在这里的url是使用的是高德地图，有需要的可以参考使用

https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

其他配置

同时把该目录下的文件复制到项目的public文件夹下面

如果运行后出现

Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

百度翻译后：
“about:black”中的脚本执行被阻止，因为文档的框架是沙盒，并且未设置“允许脚本”权限。

如果我们希望去掉这一条信息提示的话可以使用infoBox去掉它。

 let viewer = new Cesium.Viewer('cesiumBody', {
    infoBox: false
  })

最后

使用server启动项目，大功告成，来看看吧！