vue+cesium：从0到1部署开发运行环境

最新推荐文章于 2025-12-18 14:39:46 发布

还是大剑师兰特

最新推荐文章于 2025-12-18 14:39:46 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # cesium综合教程200+ 文章标签： vue.js javascript cesium cesium教程 cesium示例

本文链接：https://blog.youkuaiyun.com/cuclife/article/details/126746831

cesium综合教程200+ 专栏收录该内容

182 篇文章 ¥129.90 ¥299.90

订阅专栏

本文提供了一步一步的教程，指导如何在Vue 2.x环境中配置和部署Cesium，包括安装Node.js，使用vue-cli创建项目，放置Cesium库，可选安装Element UI，并启动开发服务器。通过遵循这些步骤，开发者可以在Vue应用中顺利集成和运行Cesium示例。

本系列教程是在vue2.X的基础上加载cesium程序，来开发各种示例程序。

安装顺序

1，下载安装nodejs

下载地址：https://nodejs.org/en/download/ 根据用户自己的机器情况进行选择不同版本的软件下载。本教程示例采用是是windows 64位系统软件。
安装过程很简单，一路下一步。更为详细的请参考：http://www.openlayers-cesium.com/2021/0929744.html
安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号。
可以查到，表示安装成功。

2，安装vue-cli

安装可以参考：https://cli.vuejs.org/zh/guide/installation.html
安装命令：

npm install -g @vue/cli
或者 yarn global add @vue/cli （尽量不用这种方式，yarn不会自己配置环境变量，运行vue -V会提示错误）

安装完后，可以通过 vue -V或者 vue --version 查看当前 vue-cli的版本号。

3，创建vue-cesium项目。

在系统中找一个文件夹，如d:/demos中，打开cmd窗口，使用 vue create vue-cesium 来创建基础项目

在项目中选择了 vue-router和vuex，方便以后的路由和组件数据传递使用方便。

4，安装部署cesium

下载cesium1.7.8 到本地 https://cesium.com/cesiumjs/

将Build文件夹中的Cesium文件夹放在VUE项目public文件夹下
##5，配置public/index.html

<!DOCTYPE html> 
<html lang=""> 
  <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 

//引用cesium的css
      <link rel="stylesheet" href="Cesium/Widgets/widgets.css"> 
      <title><%= htmlWebpackPlugin.options.title %></title> 
  </head> 
  <body> 
    <noscript> 
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 
    </noscript> 
    <div id="app"></div> 
  </body>

//引用cesium的js
     <script type="text/javascript" src="Cesium/Cesium.js"> </script> 
</html>

6，安装element UI （选装）

为了在项目中操作方便，我们直接引用elementUI组件，方便添加一些按钮，弹窗等。
进入到vue-openlayers文件夹中，打开cmd窗口，使用 npm i element-ui -S 来安装elementUI组件
在src/main.js中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

打开src/views/Home.vue,替换为以下代码：

<template> 
  <div class="about"> 
    <div id="cesiumContainer"></div> 
  </div> 
</template> 
<script> 
    export default{ 
        mounted(){ 
            Cesium.Ion.defaultAccessToken = '您的token'; 
            var viewer=new Cesium.Viewer('cesiumContainer') 
        } 
    }    
</script>

进入到vue-cesium文件夹中，打开cmd窗口，执行命令：
npm run serve
浏览器打开http://localhost:8080，就能显示我们的第一个示例。