一、vue2.0或html文件集成Cesium

梦里梦外; 2023-06-04 13:58 7阅读 0赞

### 一、vue集成Cesium ###

**1、所需环境及软件Nodejs、Vue-cli、WebPack、Cesium**

**2、创建好vue项目，不会的查看[https://blog.csdn.net/weixin\_41996632/article/details/83747479][https_blog.csdn.net_weixin_41996632_article_details_83747479]**

**3、安装Cesium**

cnpm install cesium --save

或者

npm install cesium --save

**4、配置build/webpack.base.conf.js文件**

1）、定义 Cesium 源码路径

const cesiumSource = '../node_modules/cesium/Source'

2）、在output:里加入sourcePrefix: ' ' 让webpack 正确处理多行字符串

3）、配置ousput同级下添加amd参数

amd:{
        toUrlUndefined: true
      },

4）、resolve 中设置 别名 'cesium': path.resolve(\_\_dirname, cesiumSource)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

5）、在module 中加入

unknownContextCritical: false,

**5、配置build/webpack.dev.conf.js文件**

定义 Cesium、Cesium Workers 源码路径

const cesiumSource = 'node_modules/cesium/Source'
    const cesiumWorkers = '../Build/Cesium/Workers'

在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({
          // Define relative base path in cesium for loading assets
          CESIUM_BASE_URL: JSON.stringify('')
        }),

![20191008103745525.png][]

**6、配置 build/webpack.prod.conf.js 文件**

定义 Cesium、Cesium Workers 源码路径

const cesiumSource = 'node_modules/cesium/Source'
    const cesiumWorkers = '../Build/Cesium/Workers'

在plugins 中加入下面插件,拷贝静态资源

![20191008105127711.png][]、

**7、配置config/index.js文件**

配置build:中

assetsPublicPath : '',

**8、修改main.js，添加以下代码**

import Cesium from 'cesium/Cesium'
    import widgets from 'cesium/Widgets/widgets.css'
    // 定义为全局变量，以便调用
    Vue.prototype.Cesium = Cesium

**9、配置完成，接下来进行加载，项目目录下创建views文件夹，创建Main.vue和Login.vue**

Main.vue

<template>
      <div>
        <h1>主页面</h1>
        欢迎!<b @click="login">点这里登录</b>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Main',
        methods: {
          login () {
            this.$router.replace('/login')
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

<template>
      <div>
        <button @click="login">登录</button>
        <div id="cesiumContainer"></div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'cesiumViewer',
        mounted () {
          var viewer = new this.Cesium.Viewer('cesiumContainer')
        },
        methods: {
          login () {
            this.$router.replace('/')
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

**10、修改router/index.js**

import Vue from 'vue'
    import Router from 'vue-router'
    import Main from '@/views/Main.vue'
    import Login from '@/views/Login.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Main',
          component: Main
        },
        {
          path: '/login',
          name: 'Login',
          component: Login
        }
      ]
    })

**11、配置完成运行即可，效果图如下，点击按钮切换页面**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2][]

如果需要用到Sandcastle等js文件，直接在main.js中引入即可，如下，引入路径根据实际路径进行修改

import '@/assets/cesium/Apps/Sandcastle/Sandcastle-header'

### 二、html、jsp集成Cesium ###

1、装好nodejs,以及http-server (nodejs、http-server仅作为页面访问用，也就是所需环境、根据情况安装或不安装)

nodejs安装http-server

npm install http-server -g

2、下载最新Cesium   地址:[https://cesiumjs.org/downloads/][https_cesiumjs.org_downloads]

3、创建文件夹Cesium APP，在Cesium APP文件夹下创建新页面index.html文件，并将第二部下载的Cesium解压后根目录的/Build/Cesium文件复制到Cesium APP文件夹下，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3][]

4、使用http-server在该文件夹下启动

http-server -p 8083

5、修改index.html文件，然后页面访问，以8083端口启动，访问时使用8083访问:[http://127.0.0.1:8083/index][http_127.0.0.1_8083_index]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Cesium App</title>
    <body>
    	<div>你是谁？？？</div>
    </body>
    </html>

如下图访问成功则说明 http-server启动成功

![20191009085635761.png][]

6、集成Cesium,修改index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Cesium App</title>
    	<script type="text/javascript" src="./Cesium/Cesium.js"></script>
    	<link rel="stylesheet" type="text/css" href="./Cesium/Widgets/widgets.css">
    </head>
    <body>
    	<div id="cesiumContainer" style="width: 100%; height: 100%"></div>
    	<script type="text/javascript">
    		var viewer = new Cesium.Viewer('cesiumContainer')
    	</script>
    </body>
    </html>

再次访问[http://127.0.0.1:8083/index][http_127.0.0.1_8083_index]，出现以下界面成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 4][]

[https_blog.csdn.net_weixin_41996632_article_details_83747479]: https://blog.csdn.net/weixin_41996632/article/details/83747479
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20230601/fe0a753d45a64095baab6b33bee25689.png
[20191008103745525.png]: /images/20230601/0a746b2737524cbc994103dd391ddbe1.png
[20191008105127711.png]: /images/20230601/ed347f596f6941d5881b44a52a66ab87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1]: /images/20230601/50d382db08ab455ebe6488d4f0609b95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2]: /images/20230601/54fb7f2079f64e2e8d576b66f3ef8f62.png
[https_cesiumjs.org_downloads]: https://cesiumjs.org/downloads/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3]: /images/20230601/eb2037d12a3b476b9d00c7325afcb047.png
[http_127.0.0.1_8083_index]: http://127.0.0.1:8083/index
[20191009085635761.png]: /images/20230601/2808b3e8d01a4ec69c717d013f097ba1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 4]: /images/20230601/90dfcda40613458180d4a1f2329dd047.png