vue3引入cesium@1.64.0

安装cesium

npm install cesium@1.64.0

入口js引入

let Cesium = require('cesium/Source/Cesium');
import 'cesium/Source/Widgets/widgets.css';
// 挂在window上
window.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'
module.exports = {
    ···
    configureWebpack: {
        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('./')
            })
        ]
    }
    ···
}

创建地图

Cesium.Ion.defaultAccessToken = '你的token';  // 注册地址https://cesium.com/ion/signin/tokens
window.viewer = new Cesium.Viewer('map-container', {
       baseLayerPicker: false,
       geocoder: false, //是否显示地名查找控件
       homeButton: false,
       sceneModePicker: false, //是否显示投影方式控件
       selectionIndicator: false,
       baseLayerPicker: false, //是否显示图层选择控件
       navigationHelpButton: false, //是否显示帮助信息控件
       animation: false, // 是否显示动画控件
       // creditContainer: "credit",
       timeline: false, //是否显示时间线控件
       fullscreenButton: false,
       vrButton: false,
       infoBox: false,  //是否显示点击要素之后显示的信息
       scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存
       sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
       imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
               url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=b6b320a7ccfabfdc30536330efc07f3e", // 图层地址
               layer: 'img',
               style: 'default',
               tileMatrixSetID: 'w',
               format: 'tiles',
               maximumLevel: 18
        })
})
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium的logo
viewer.scene.globe.depthTestAgainstTerrain = false;  // 图标被遮挡
// 关闭双击事件viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// 获取事件手柄
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 点击事件
handler.setInputAction(movement => {
    let pick = viewer.scene.pick(movement.position),
        pickedEntity = Cesium.defined(pick) ? pick.id : undefined; //pick.id即为entity
    if (pickedEntity) {
        // 处理entity的点击事件
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 鼠标移动事件
handler.setInputAction(movement => {
    let pick = viewer.scene.pick(movement.endPosition),
        pickedEntity = Cesium.defined(pick) ? pick.id : undefined; //pick.id即为entity
    // 移入entity，修改鼠标样式
    if (pickedEntity && pickedEntity._billboard) {
         document.getElementsByTagName('body').item(0).style.cursor = "pointer"
    } else {
         document.getElementsByTagName('body').item(0).style.cursor = "default"
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 天地图矢量标注图层
window.tdtImgAnnoLayer = viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t6.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=b6b320a7ccfabfdc30536330efc07f3e',
        layer: 'tdtImgAnnoLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible'
    })
)
// 移除图层
// viewer.imageryLayers.remove(window.tdtImgAnnoLayer);