精华内容
下载资源
问答
  • Cesium 基础】vue3+cesium 环境搭建
    千次阅读
    2020-03-22 00:01:39

    参考连接

    1. 安装 vue3
    
    npm i -g @vue/cli 
    vue -V  / vue --version
    //如果已经安装vue2 需要先卸载,再进行vue3的安装 
    
    
    1. 创建项目
    
    vue create proName 
    cd proName
    npm run serve //可以在 package.json文件中,scripts 中新增 start
    
    // 如果需要创建vue2版本的项目需要 安装  
    // npm install -g @vue/cli-init
    // vue init webpack proName
    
    1. 安装cesium 依赖
    
    npm i cesium --save
    
    1. 在项目根目录新增配置文件 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
    
            }
        }
    }
    
    1. 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环境配置来实现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/,即可看到一个三维地球,此时代表环境配置成功。
    在这里插入图片描述

    展开全文
  • 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的就好了。浏览器没有错误了,而且地球也出来了。

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

    展开全文
  • 开源三维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,这里...
  • 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...
  • Cesium入门01-环境构建

    2021-01-08 05:53:25
    简述Windows的Cesium环境搭建流程以及操作可能遇到的问题 一、安装过程 tip:由于官网下载速度感人,下面网盘链接里提供了从官网下载的NodeJS(v12.16.0)和Cesium(v1.40) 链接:...
  • 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中,右键...
  • 创建一个项目文件夹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引入(在自己...
  • Cesium开发的几种方式,包括传统html开发,webpack模式开发,利用源码开发,vue组件方式开发
  • 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项目搭建 ...
  • 环境搭建 前要说明: 1,本人环境为Win10 64bit Win PC电脑。 2,本文主要参考文档:https://cesiumjs.org/tutorials/Cesium-Workshop/ 步骤: 1:检测自己的环境是否支持Cesium 方法为访问Cesium demo项目...
  • Cesium需要浏览器支持WebGL,可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。(推荐使用Chrome) 测试地址:CesiumJS – Cesium 选择IDE 官网中写到: If you’re already a ...
  • 基于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 ...
  • electron+vue+elementui+cesium环境搭建 nodejs安装(可以百度怎么安装) 安装之后查看版本 node -v 我的nodejs版本 14.15.1 安装vue/cli脚手架 npm install -g @vue/cli //查看版本 vue -V 我的版本时4.5.11 全局...
  • 1.搭建VUE项目 使用vue-cli工具创建一个vue项目:(确保已安装node.js) vue init webpack cesiumtest 2.用webstrom打开项目(其他编码工具也可以) 3.安装cesium 在配置文件package.json,中新加"cesium": ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 617
精华内容 246
关键字:

cesium环境搭建