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: 8080//修改服务端口号
    },
    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’，因为<mark style="box-sizing: border-box; outline: 0px; background-color: rgb(248, 248, 64); color: rgb(0, 0, 0); overflow-wrap: break-word;">Cesium 1.63</mark> 版本之前是用的<mark style="box-sizing: border-box; outline: 0px; background-color: rgb(248, 248, 64); color: rgb(0, 0, 0); overflow-wrap: break-word;">AMD</mark>的方式进行编译的，而在1.63版时使用ES6进行了重构。
https://segmentfault.com/a/1190000022714154

新版本不支持整体import，可以按需引入。

"export ‘default’ (imported as ‘Cesium’) was not found in ‘cesium/Cesium’

这个是新版本不支持整体import，可以按需引入，可以看Cesium.js最后，也可以直接用require
例如，main.js中加入

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

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

cesium页面加载下面显示不全，style加入position:absolute

html,body,#cesiumContainer {
  width: 100%;
  height: 100%;
  position:absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

高分辨率屏幕加载瓦片地图不清晰

viewer之后加入以下代码

var viewer = new this.$Cesium.Viewer("cesiumContainer", {
      //加载在线谷歌地图
      imageryProvider: new this.$Cesium.UrlTemplateImageryProvider({
        url: "http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
      })
    });
    viewer._cesiumWidget._supportsImageRenderingPixelated = this.$Cesium.FeatureDetection.supportsImageRenderingPixelated();
    viewer._cesiumWidget._forceResize = true;
    if (this.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
      var vtxf_dpr = window.devicePixelRatio;
      // 适度降低分辨率
      while (vtxf_dpr >= 2.0) {
        vtxf_dpr /= 2.0;
      }
      //alert(dpr);
      viewer.resolutionScale = vtxf_dpr;
    }

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. 结果

在这里插入图片描述

参考：https://blog.csdn.net/qq_41366268/article/details/107165693?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=6c7eda90-415d-45a0-8c8e-4784e3c774ae&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
https://blog.csdn.net/weizhixiang/article/details/104473856