cesium+Vue项目环境搭建

搭建Vue基础环境

安装Cesium环境

-npm install cesium

Cesium资源配置

Cesium是一个非常复杂的库无法通过在main.js中直接进行引入Cesium【vue可在main.js直接引入】很难去直接打包因为:

Cesium是用异步模块定义（AMD）的格式编写源码的
它包括一些事先编译好的基于AMD的第三方库
Cesium中web worker的使用率很高
一些代码使用了多行字符串

手动复制Cesium编译好的静态文件到static文件夹中

进入node_modules\cesium\Build文件夹中，将编译好的Cesium文件复制到根目录下的static中，并把其中Cesium.js删除
1. static文件夹的作用是存放静态文件的 Webpack在打包时会将其打包到生成dist文件夹中
2. CopyWebpackPlugin是Webpack的插件作用等同于手动复制文件到另一个文件夹的过程
在这里插入图片描述

build\webpack.dev.conf.js及build\webpack.prod.conf.js配置如下：

// copy custom static assets
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
  }
])

设置Webpack的配置项，使其支持Cesium

build\webpack.base.conf.js配置如下：

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath,
  sourcePrefix: ' '//让Webpack正确缩进多行字符串。
},

build\webpack.base.conf.js配置如下：

module: {
    rules: [
     .....
    ]，
    unknownContextRegExp: /^.\/.*$/,//Webpack打印载入特定库时候的警告
    unknownContextCritical: false,//解决错误Error: Cannot find module "."
}

此时npm run dev运行控制台报错：

./node_modules/sockjs-client/dist/sockjs.js.map Module parse failed: Unexpected token (1:10)

`原因：.js.map后缀文件没有正确加载`

解决方法：添加webpack配置

build\webpack.base.conf.js

{
  test: /\.js\.map$/,
  use: {
    loader: 'file-loader'
  },
},

整体 rules配置如下

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // exclude: "/node_modules/",
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.js\.map$/,
        use: {
          loader: 'file-loader'
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ],
    unknownContextCritical: false,
    unknownContextRegExp: /^.\/.*$/
  },

到此基本配置完成

编写Vue组件

此时Cesium所需要的静态资源已经打包并放到正确的位置但是Cesium并不知道如何找到他们需要让Cesium知道它的静态资源存放在哪里这里Cesium已经提供了一个API 就是buildModuleUrl函数当完成这一步完成后我们就可以进行Vue+Cesium的正常开发了

新建一个cesiumViewer的组件

src\components\cesiumViewer.vue

<template>
    <div id="cesiumContainer"></div>
</template>

<script>
//导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
//我们刚才所说的如何让Cesium知道静态资源在哪里的API
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
//导入必须的样式表
import "cesium/Source/Widgets/widgets.css";

export default{
    name:"cesiumContainer",
    mounted:function () {
        //设置静态资源目录
        buildModuleUrl.setBaseUrl('../../static/Cesium/')
        //创建viewer实例
       this.viewer = new Cesium.Viewer('cesiumContainer', {
		    animation: false, // 是否显示动画控件
		    shouldAnimate: false, //是否初始时刻运动
		    homeButton: false, // 是否显示Home按钮
		    fullscreenButton: false, // 是否显示全屏按钮
		    baseLayerPicker: false, // 是否显示图层选择控件 去掉自带的图层选择器
		    geocoder: false, // 是否显示地名查找控件,设置为true，则无法查询
		    timeline: false, // 是否显示时间线控件
		    sceneModePicker: true, // 是否显示投影方式控件 三维/二维
		    navigationHelpButton: false, // 是否显示帮助信息控件
		    infoBox: false, // 是否显示点击要素之后显示的信息 信息框小部件
		    requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]
		    scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
		    sceneMode: 2, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
		    fullscreenElement: document.body, // 全屏时渲染的HTML元素
		    selectionIndicator : false,//是否显示选取指示器组件
		    terrainProvider: Cesium.createWorldTerrain(),// 注释时相当于使用默认地形，解开注释相当于使用全球地形[世界地形数据]
		    baseLayerPicker:false,
		    //imageryProvider:new Cesium.UrlTemplateImageryProvider({
		    //    url:"satellite/tiles/{type}/z={z}&x={x}&y={y}",
		    //})
		})
    },
    data () {
        return {
            'viewer' : {}
        }
    }
}
</script>

<style scoped>

</style>

在App.vue中注册组件

src\App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import cesiumViewer from "./components/cesiumViewer.vue"
export default {
  name: 'App',
  components : {
    'cesiumViewer' : cesiumViewer
  }
}
</script>

<style>
/* 保证浏览器全屏幕显示，没有多余的白边 */
html, body, #cesiumContainer {
 width: 1000px; 
 height: 700px; 
 margin: 0; 
 padding: 0; 
 overflow: hidden;
}
</style>

修改router/index.js文件

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'cesiumViewer',
      component: cesiumViewer
    }
  ]
})

npm run dev 运行项目

原文链接：https://blog.csdn.net/yangwqi/article/details/103298610

搭建Vue基础环境

安装Cesium环境

Cesium资源配置

手动复制Cesium编译好的静态文件到static文件夹中

build\webpack.dev.conf.js及build\webpack.prod.conf.js配置如下：

设置Webpack的配置项，使其支持Cesium

build\webpack.base.conf.js配置如下：

build\webpack.base.conf.js配置如下：

此时npm run dev运行 控制台报错：

原因：.js.map后缀文件没有正确加载

解决方法：添加webpack配置

到此基本配置完成

编写Vue组件

新建一个cesiumViewer的组件

在App.vue中注册组件

修改router/index.js文件

npm run dev 运行项目

此时npm run dev运行控制台报错：

`原因：.js.map后缀文件没有正确加载`