Cesium系列(1)--Vue-cli3 + Cesium 快速构建

vue-cli3集成Cesium的vue.config.js配置

前言

2020年给你讲个笑话，鹅厂被骗了。hhhhhhh。
很久没更新了。疫情影响，经历了在家办公，也经历了出门戴口罩的时期。不过，一切都会好的。
言归正传，新的一年，不管经历了什么都要继续。今年准备从二维转战三维了，开源免费的目前也就是Cesium了。之前一直都知道这个，只是从来没有真正的使用过，接触过。刚开始的时候，就看了一天的资料，也就是本地运行一下，大致看了一下代码和案例。然后就给我一个项目让我直接该需求了，头两天也是有点手忙脚乱，现在大概了解一点了，就记录一下最近遇到的问题。

步骤

有个vue-cli3的项目, 然后用 npm 命令去安装 cesium
npm i cesium 或者 cnpm i cesium
安装 cesium 之后需求在 vue.config.js 文件中去配置，如果没有该文件就在根目录新建一个。

配置内容

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

const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
// 后续 import 引入 cesium 为改路径下的
const cesiumBuild = './node_modules/cesium/Build/Cesium'

module.exports = {
    // 基本路径
    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,
        disableHostCheck: true

    },

    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        node: {
            // Resolve node module use of fs
            fs: "empty"
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumBuild)
            }
        },
        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, '../Build/Cesium/ThirdParty'), to: 'ThirdParty' }]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('./')
            })

        ],
        module: {
            unknownContextCritical: false
        }
    }
};

在文件中引用 cesium

import "cesium/Widgets/widgets.css";
import * as Cesium from "cesium/Cesium";

实例化

methods: {
       initCesium () {
           console.log(Cesium.VERSION)
           // viewer对象不能放入data中，由于vue会对data对象监听，会使内存暴增。
           window.$CViewer =  new Cesium.Viewer('cesiumContainer', {
               //Hide the base layer picker
               baseLayerPicker: false,
               // timeline: false,
               animation: false,
               shouldAnimate: true,
               navigationHelpButton: true,
               fullscreenButton: false,
               geocoder: false,
               scene3DOnly: true,
               homeButton: true,
               imageryProvider: new Cesium.UrlTemplateImageryProvider({
                   url: 'http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}',
                   credit: '',
                   tilingScheme: new Cesium.WebMercatorTilingScheme()
               }),
               mapProjection: new Cesium.WebMercatorProjection()
           });
           // 添加天地图标注图层
           let tdt =  $CViewer.scene.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
               url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f47269183506137375ed3a960cb675cd",
               layer: "tdtAnnoLayer",
               style: "default",
               format: "image/jpeg",
               tileMatrixSetID: "GoogleMapsCompatible"
           }));
           // 加载3dtiles
           const tileset = new Cesium.Cesium3DTileset({
               url: 'Cesium3DTiles/Tilesets/Tileset/tileset.json'
           });
        
           tileset.readyPromise.then(function(tileset) {
               $CViewer.scene.primitives.add(tileset);
               $CViewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
           }).otherwise(function(error) {
               console.log(error);
           });
       }
   }

注意项

实例化的viewer对象，不能放入vue的 data 中去，由于vue的机制，会监听data中的属性。如果放入data中，会内存容易爆掉。最好的方法是放入 window 对象中。
```
   window.$CViewer = new Cesium.Viewer()
```
对于本地模型文件我一般都是放入public文件夹引入

后续

后面会写项目中遇到的各种问题，再之后就开始写源码关于Cesium3DTiles调度的一点点研究成果