cesium学习笔记

1.cesium本地配置

1.1安装cesium

npm install cesium --save

1.2修改配置文件

(1) build/webpack.base.conf.js文件

//增加一行
const cesiumSource ='../node_modules/cesium/Source'

modules.exports模块中添加

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
      //增加
      sourcePrefix: ' '
  },
//增加
  amd:{
    toUrlUndefined: true
  },

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      //增加
      'cesium': path.resolve(__dirname, cesiumSource)
    }
  },

(2) build/webpack.dev.conf.js

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

plugins模块

  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env,
      'CESIUM_BASE_URL': JSON.stringify('')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    //增加
    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'
    }]),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
    new FriendlyErrorsPlugin()

  ]

（3）build/webpack.prod.conf.js

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

plugins 模块

plugins: [
    new webpack.DefinePlugin({
      'process.env': env,
      'CESIUM_BASE_URL': JSON.stringify('./')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: true
    }),
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }),
    //增加
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, cesiumWorkers),
      to: 'Workers'
    }]), //flag
    //增加
    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'
    }]),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })
  ]

config/index.js

//将 assetsPublicPath的值设置为空

assetsPublicPath: '',

最后到 node_modules/cesium/Build/Cesium 文件，可以看到里面还有四个文件夹和Cesiumjs，拷贝到static文件夹下，如下图：

然后打开index.html，用script标签去引入cesiumjs：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>农业信息可视化系统</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="vue.js, wms, vue2, 后台模板, 管理系统, element" />
    <meta name="description" content="基于Vue2 + Element UI 的后台管理系统解决方案" />
    <meta name="referrer" content="no-referrer">
    <link rel="stylesheet" href="./static/Cesium/Widgets/widgets.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="static/Cesium/Cesium.js"></script> 
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
</body>
</html>```