Vue-cli3 + Cesium1.7 开发环境配置（一）

**

请看最新的这篇

**

1. Vue3创建项目

vue create tdmap

2. npm引入Cesium包

cnpm install cesium --save

3. 新增配置文件

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

const debug = process.env.NODE_ENV !== 'production'

//定义cesium源码路径
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
    publicPath: '',
    devServer: {
        port: 8090 //修改服务端口号
    },
    outputDir: 'docs', //设置 build 输出目录
    configureWebpack: {
        output: {
            sourcePrefix: ' ' //让webpack正确处理多行字符串
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {    
			//在resolve中设置cesium别名，
			//这样在引入的时候就可以根据别名找到Cesium的包
                '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 从哪里加载资源，如果使用默认的''，
             //却变成了绝对路径了，所以这里使用'./',使用相对路径
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false

        }
    }
}

4. 修改main.js

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

或者在组件中引入

import * as Cesium from "@/../node_modules/cesium/Source/Cesium.js"
//也可以用按需引入的方式，具体路径需要自己调整
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";

5. 注意

但配置完后使用 import Cesium from ‘cesium/Cesium’ 导入模块时总会报错："export ‘default’ (imported as ‘Cesium’) was not found in ‘cesium/Cesium’，因为Cesium 1.63 版本之前是用的AMD的方式进行编译的，而在1.63版时使用ES6进行了重构。
https://segmentfault.com/a/1190000022714154

新版本不支持整体import，可以按需引入。https://blog.csdn.net/weizhixiang/article/details/104473856

6. 测试

新建地图组件Map.vue

<template>
    <div id="cesiumContainer"></div>
</template>
 
<script>
export default {
  name: 'Map',
  data () {
    return {}
  },
  mounted(){
    var Cesium = this.Cesium;
    var cesiumContainer = document.getElementById("cesiumContainer");
    var viewer = new Cesium.Viewer("cesiumContainer",{
   
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
           url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb",
                layer: "tdtBasicLayer",
                style: "default",
                format: "tiles",
                tileMatrixSetID: "GoogleMapsCompatible",
                show: true,
                maximumLevel: 18
        })
    });
    
  }
</script>

<style scoped>
#cesiumContainer{
    width: 100%;
	height: 60%;
}
</style>

7. 结果

8. 问题

截完图发现右上角图标缺了一个