Cesium学习之路（一）：环境搭建

前言：

最近又是心血来潮啊，把cesium捞出来学习学习一波吧，思来想去还是来csdn上记录下学习的过程和心得吧。本来想在自己网站上贴练习的例子的。

这次学习cesium，是想结合自己有实际做GIS项目的经验和熟悉arcgis js api的经验，从实际的项目所需要的gis功能上针对性的去学习cesium可以实现的功能

好了，废话不多说，开始进入正题 -----------------环境的搭建

---

 

环境的搭建

本人的环境是vue 3 ，然后cesium 1.75

1.首先引入cesium 1.75的模块包，建议版本高于1.63，（记得1.63还是多少版本时cesium 采用的es6写法，引入相应类的时候好像有点改变）

怎么引入cesium依赖，不说了

2.在项目的根目录下建一个叫vue.config 的js文件，里面是如下的代码

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

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

module.exports = {
    // 基本路径  3.6之前的版本时 baseUrl
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 5000,
        https: false,
        hotOnly: false
    },
    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
        }
    }
};

3.在main.js中加入：

//引入cesium
var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

4.在页面调用：

var viewer = new that.Cesium.Viewer("cesiumContainer");

我在前面加个that. 是因为我在main.js里注册的Cesium，根据你们自己实际情况

---

十年生死两茫茫，写程序，到天亮。
千行代码，Bug何处藏。 
纵使上线又怎样，朝令改，夕断肠。 
领导每天新想法，天天改，日日忙。
相顾无言，惟有泪千行。
每晚灯火阑珊处，夜难寐，又加班。