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

原创

已于 2024-06-11 09:04:58 修改 · 2.1k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-08-07 16:00:04 首次发布

本文介绍了如何在Vue项目中使用Cesium进行WebGL开发，包括创建Vue项目、安装Cesium、解决import.meta报错、引入token和配置imageryProvider，以及处理沙盒模式和infoBox的设置。

前言

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

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

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

在Ceium官网中就可以看到，下载Cesium可以直接npm下载官网下载地址
在这里插入图片描述
所以我们安装官网直接npm i进行下载

npm install cesium

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

安装完成之后就将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。

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[…]后面)