【Cesium 基础】vue3+cesium 环境搭建

千次阅读

2020-03-22 00:01:39

参考连接

安装 vue3


npm i -g @vue/cli 
vue -V  / vue --version
//如果已经安装vue2 需要先卸载，再进行vue3的安装

创建项目


vue create proName 
cd proName
npm run serve //可以在 package.json文件中，scripts 中新增 start

// 如果需要创建vue2版本的项目需要 安装  
// npm install -g @vue/cli-init
// vue init webpack proName

安装cesium 依赖


npm i cesium --save

在项目根目录新增配置文件 vue.config.js,如下

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
    baseUrl: '',
    devServer: {
        port: 8090 //修改服务端口号
    },
    outputDir: 'docs', //设置 build 输出目录
    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        plugins: [
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false

        }
    }
}

main.js 中新增引用

import Cesium from 'cesium/Cesium' //from 中 cesium 指向的是vue.config.js中 alias对象中的别名
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css'

更多内容，欢迎关注公众号
seeling_GIS

更多相关内容

cesium环境搭建
2021-07-10 12:19:41

1.node的安装 2.使用npm下载注意不同的分支，特性不同：npm install clone https://github.com/CesiumGS/cesium 3.找到并cd进入cesium...出现http://localhost:8080/表示搭建完成方法二 7.npm install http-server

1.node的安装
2.使用npm下载注意不同的分支，特性不同：npm install clone https://github.com/CesiumGS/cesium
3.找到并cd进入cesium文件夹

方法一
4.npm i
5.npm install … Installed 37 packages Linked 569 latest versions
6.npm start
出现http://localhost:8080/表示搭建完成

方法二
7.npm install http-server -g
8.http-server -c-1
9.然后出现本地访问地址：
http://127.0.0.1:8080
http://192.168.1.109:8080
表示环境已经搭建完成了。
如图所示：

收起

展开全文
cesium环境搭建（创建三维地球）
2021-11-19 19:53:17
下面就来讲解cesium的环境配置来实现helloworld。环境配置一.下载cesium包。可以从github下载源码包，也从官网下载cesium包，解压后如下。二.新建项目新建一个项目，取名为test1，然后把下载的cesium中的...
cesium是一个用于开发三维地球的开源javascript库。下面就来讲解cesium的环境配置来实现helloworld。
环境配置
一.下载cesium包。
可以从github下载源码包，也从官网下载cesium包，解压后如下。

二.新建项目
新建一个项目，取名为test1，然后把下载的cesium中的Build目录拷贝到当前文件夹下，并且在项目下新建一个index.html。

test1项目

index.html代码如下。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
       
    </script>
</body>
</html>
```
三.安装服务器环境
这里使用nodejs中的http-server服务，当然你也可以使用tomcat等。首先需要安装nodejs，配置好环境变量后，在终端执行npm install -g http-server全局安装http-server，然后终端切换到自己创建的项目目录下，执行http-server -p 8081开启服务（在8081端口开启，默认8080），然后在浏览器输入http://localhost:8081/，即可看到一个三维地球，此时代表环境配置成功。
收起
展开全文
javascript 前端 node.js

vue+cesium环境搭建

2021-07-09 17:45:25

vue+cesium环境搭建 在搭建的时候遇到了一些问题，记录一下 1.首先安装脚手架 npm install @vue/cli -g 2.我是用vue create 项目名创建的项目，但选择的是2.0的 vue create vue-cesium 3.安装copy-webpack-plugin...

vue+cesium环境搭建

在搭建的时候遇到了一些问题，记录一下

1.首先安装脚手架

npm install @vue/cli -g

2.我是用vue create 项目名创建的项目，但选择的是2.0的

vue create vue-cesium

3.安装copy-webpack-plugin

npm install copy-webpack-plugin --save-dev

4.在根目录下创建一个vue.config.js文件，复制以下代码：

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,
  // webpack相关配置
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', path.resolve(__dirname, './src'))
  },
  configureWebpack: {
    amd: {
      // Enable webpack-friendly use of require in Cesium
      toUrlUndefined: true
    },
    plugins: [
      // Copy Cesium Assets, Widgets, and Workers to a static directory
      new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
      new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
      new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
      new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'ThirdParty'), to: 'ThirdParty' } ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ],
    module: {
      unknownContextCritical: false
    }
  },
  // css相关配置
  css: {},
  // 是否使用 thread-loader
  parallel: require('os').cpus().length > 1,
  // PWA 插件相关配置
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {},
  // 第三方插件配置
  pluginOptions: {}
}

5.在main.js中引入

import * as Cesium from 'cesium/Source/Cesium'
import * as widgets from 'cesium/Source/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

6.在想要放置的页面中添加一个div

<template>
  <div class="home">
    <div id="cesiumContainer"></div>   <!--放置地图的地方 -->
  </div>
</template>

7.mounted里加载。

mounted(){
   let Cesium = this.Cesium
   let viewer = new Cesium.Viewer("cesiumContainer");
 }

8.效果展示

在这里插入图片描述

9.我在这个过程中遇到了一下问题：

（1）.报错了

在这里插入图片描述
因为我安装的copy-webpack-plugin的版本是9.0.1,然后就报错了，具体为什么不清楚。然后我安装了5.1.2版本的就好了，不会报错。（安装其他的不知道行不行）

（2）.浏览器报错，并且地球没出来。

在这里插入图片描述

在这里插入图片描述
因为我安装的cesium的版本是1.79.1，浏览器报错了，而且地球出不来，后来安装了1.83.0的就好了。浏览器没有错误了，而且地球也出来了。

以上就是我所搭建的步骤，以及所遇到的问题，至于为什么会那样，我也不清楚，希望有知道的人能告诉我一下，谢谢。

收起

展开全文

vue

开源三维GIS之Cesium环境搭建(一)
万次阅读 2018-08-13 18:38:01

业余时间也查阅了相关三维方面的GIS平台，特别是开源方面，其中Cesium表现比较突出，所以花了点时间学习一下。 Cesium是基于JavaScript编写的，使用WebGL的地图引擎，一款开源3DGIS的js库。无插件支持多种浏览...

收起
01 Cesium—环境搭建
2022-03-22 22:28:13

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配验证浏览器 Cesium 需要浏览器支持 WebGL，可以通过访问CesiumJS 官网，能看到正常显示基本上就能测试自己的浏览器是否支持 Cesium，这里...

收起

GIS
vue cli cesium环境搭建
千次阅读 2021-03-21 15:59:04

Vue CLI 搭建cesiumcesium简介1. 引入cesium包2.安装的cesium引入public静态资源中3.全局引入cesium第一种引入cdn引入在public/index.html中第二种引入在main.js中 cesium简介 Cesium是国外一个基于JavaScript...

收起

vue.js
Cesium入门01-环境构建
2021-01-08 05:53:25

简述Windows的Cesium环境搭建流程以及操作可能遇到的问题一、安装过程 tip：由于官网下载速度感人，下面网盘链接里提供了从官网下载的NodeJS(v12.16.0)和Cesium(v1.40) 链接：...

收起
Cesium项目开发基础(1)——Cesium环境搭建
千次阅读 2020-03-27 20:55:58

Cesium环境搭建 本文所涉及到的内容 Cesium的简介 Nodejs环境的搭建 git的安装 Cesium的源码打包第一个Cesium程序 Cesium简介 CesiumJS是一个用于构建三维地球模型的基于WebGL的开源Javascript开源库。开发者可以...

收起
Cesium开发环境搭建
2021-10-21 22:05:15

一、Cesium简介 Cesium是一个跨平台、跨浏览器的展示三维...二、Cesium环境搭建 可以使用tomcat，node.js，IIS，Apache，Nginx，本人使用的是node.js 2.1 node安装 node.js安装包及源码下载地址：https://nodejs.org

收起

前端
vue + cesium 环境搭建
千次阅读 2020-04-29 14:01:04

cesium v1.68.0 开发工具使用vscode node、vue-cli等安装步骤网上都说烂了，这里就不说了。下载webpack模板项目，安装cesium依赖在自己喜欢的位置创建测试文件夹，这里我用的cesiumDemo，拖入vscode中，右键...

收起

vue
cesium环境搭建篇（一）使用http-server搭建一个简单的cesium服务
2021-04-14 09:09:32

创建一个项目文件夹cesium-temp,在根目录下创建scripts文件夹，在cesium官网下载解压后的文件中Build/Cesium复制到scripts文件夹下 cmd 进入到项目文件路径下执行 http-server -p 8082 执行后别关闭这个cmd窗口 ...

收起
vue+cesium 环境搭建（一）
千次阅读 2020-09-23 10:56:36

1、vue脚手架环境搭建成功后，执行npm install cesium和npm install --save cesium，执行成功后node_modules下会有cesium文件夹。 2、Cesium1.6及以上版本cesium不支持import的方式引入，改用require引入（在自己...

收起

javascript vue
Cesium开发环境搭建的几种方法总结
2021-12-21 09:11:34

Cesium开发的几种方式，包括传统html开发，webpack模式开发，利用源码开发，vue组件方式开发

收起

vue.js 前端
cesium 环境搭建 （详细）
2020-04-08 11:53:04

cesium环境搭建1.node 安装2.cnpm 设置3.Cesium的获取 1.node 安装 Node.js安装包及源码下载地址安装完成（我的安装目录：D:\CesiumWorkspace），完成后，打开命令行（win+R），找到输入:node -v,如果结果为版本号,...

收起
Vue+Cesium环境搭建
千次阅读 2019-07-16 17:18:54

基础环境安装 node.js(检测npm包管理工具 npm -v) Webpack安装(全局安装 npm install webpack -g)(检测安装成功: webpack -v) vue-cli脚手架构建工具（npm install vue-cli -g）（检测：vue -V） vue项目搭建 ...

收起
Cesium是啥与Cesium环境搭建
2022-03-30 19:31:20

环境搭建 前要说明： 1，本人环境为Win10 64bit Win PC电脑。 2，本文主要参考文档：https://cesiumjs.org/tutorials/Cesium-Workshop/ 步骤： 1:检测自己的环境是否支持Cesium 方法为访问Cesium demo项目...

收起

java
Cesium入门2 - Cesium环境搭建及第一个示例程序
2021-10-18 17:17:38

Cesium需要浏览器支持WebGL，可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。（推荐使用Chrome）测试地址：CesiumJS – Cesium 选择IDE 官网中写到： If you’re already a ...

收起

java
基于Vue搭建Cesium环境
2021-05-12 21:48:41

基于Vue搭建Cesium环境 1、利用脚手架创建一个vue项目 vue create my-test // my-test 是项目名称 2、安装vue-cli-plugin-cesium 插件 npm install --save-dev vue-cli-plugin-cesium 3、安装完成后，使用vue ...

收起

vue javascript
electron+vue+elementui+cesium环境搭建
2021-03-17 13:48:33

electron+vue+elementui+cesium环境搭建 nodejs安装（可以百度怎么安装）安装之后查看版本 node -v 我的nodejs版本 14.15.1 安装vue/cli脚手架 npm install -g @vue/cli //查看版本 vue -V 我的版本时4.5.11 全局...

收起

javascript vue.js css
Cesium系列4 — Vue+Cesium开发环境搭建（基于Cesium1.74）
万次阅读 多人点赞 2020-10-27 10:43:23

1.搭建VUE项目使用vue-cli工具创建一个vue项目：(确保已安装node.js) vue init webpack cesiumtest 2.用webstrom打开项目（其他编码工具也可以） 3.安装cesium 在配置文件package.json，中新加"cesium": ...

收起

vue

cesium环境搭建

cesium环境搭建（创建三维地球）

vue+cesium环境搭建

vue+cesium环境搭建

1.首先安装脚手架

2.我是用vue create 项目名创建的项目，但选择的是2.0的

3.安装copy-webpack-plugin

4.在根目录下创建一个vue.config.js文件，复制以下代码：

5.在main.js中引入

6.在想要放置的页面中添加一个div

7.mounted里加载。

8.效果展示

9.我在这个过程中遇到了一下问题：

（1）.报错了

（2）.浏览器报错，并且地球没出来。

开源三维GIS之Cesium环境搭建(一)

01 Cesium—环境搭建

vue cli cesium环境搭建

Cesium入门01-环境构建

Cesium项目开发基础(1)——Cesium环境搭建

Cesium开发环境搭建

vue + cesium 环境搭建

cesium环境搭建篇（一）使用http-server搭建一个简单的cesium服务

vue+cesium 环境搭建（一）

Cesium开发环境搭建的几种方法总结

cesium 环境搭建（详细）

Vue+Cesium环境搭建

Cesium是啥与Cesium环境搭建

Cesium入门2 - Cesium环境搭建及第一个示例程序

基于Vue搭建Cesium环境

electron+vue+elementui+cesium环境搭建

Cesium系列4 — Vue+Cesium开发环境搭建（基于Cesium1.74）

cesium环境搭建

cesium环境搭建

cesium环境搭建（创建三维地球）

vue+cesium环境搭建

vue+cesium环境搭建

1.首先安装脚手架

2.我是用vue create 项目名 创建的项目，但选择的是2.0的

3.安装copy-webpack-plugin

4.在根目录下创建一个vue.config.js文件，复制以下代码：

5.在main.js中引入

6.在想要放置的页面中添加一个div

7.mounted里加载。

8.效果展示

9.我在这个过程中遇到了一下问题：

（1）.报错了

（2）.浏览器报错，并且地球没出来。

开源三维GIS之Cesium环境搭建(一)

01 Cesium—环境搭建

vue cli cesium环境搭建

Cesium入门01-环境构建

Cesium项目开发基础(1)——Cesium环境搭建

Cesium开发环境搭建

vue + cesium 环境搭建

cesium环境搭建篇（一）使用http-server搭建一个简单的cesium服务

vue+cesium 环境搭建（一）

Cesium开发环境搭建的几种方法总结

cesium 环境搭建 （详细）

Vue+Cesium环境搭建

Cesium是啥与Cesium环境搭建

Cesium入门2 - Cesium环境搭建及第一个示例程序

基于Vue搭建Cesium环境

electron+vue+elementui+cesium环境搭建

Cesium系列4 — Vue+Cesium开发环境搭建（基于Cesium1.74）

cesium环境搭建

2.我是用vue create 项目名创建的项目，但选择的是2.0的

cesium 环境搭建（详细）