1.npm 下载cesium建议指定版本下载，最新版本有兼容性问题

npm install cesium@1.95.0

2.在node_models中找到cesium将此文件下的Cesium文件复制出来放在项目的静态资源public中或者static中，获取去github上去下载zip包放在本地也可以

3.在index.html中引入js和css

<script src="./static/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="./static/Cesium/Widgets/widgets.css">

4.现在就可以在页面中打压cesium对象了如果有输出说明引入成功可以直接使用

<div id="my-map"></div>
 <div id="myModal" class="modal">
    <div id="modal-body">
    <div id="modelContent">
   .....自定义样式
<div>
</div>
</div>

mounted(){
   //设置token
            Cesium.Ion.defaultAccessToken = "cesium的token自己去官网申请";
            var lagObj = [6378137.0, 6378137.0, 6356752.3142451793];//定义地球形状
            Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(lagObj[0], lagObj[1], lagObj[2]));
            const viewer = new Cesium.Viewer('my-map', {
                homeButton: false,
                sceneModePicker: false,
                baseLayerPicker: false, // 影像切换
                animation: false, // 是否显示动画控件
                infoBox: false, // 是否显示点击要素之后显示的信息
                selectionIndicator: false, // 要素选中框
                geocoder: false, // 是否显示地名查找控件
                timeline: false, // 是否显示时间线控件
                fullscreenButton: false,
                shouldAnimate: false,
                scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
                navigationHelpButton: false, // 是否显示帮助信息控件
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: '',//地图背景链接
                    maximumLevel: 17,//瓦片图最大层级
                })
            });
            // 去掉logo
            viewer.cesiumWidget.creditContainer.style.display = "none";
            // 加载分割模型3dtitles
            const tileset = new Cesium.Cesium3DTileset({
            // 3DTiles文件夹的路径
                url: "/xxxxx/tileset.json",
            });
 // 创建一个Entity对象，表示标注点（多个标注点继续写就行会自动增加到 viewer.entities对象）
            viewer.entities.add({
                // 设置实体的位置 标注点显示在3D Tiles模型上方(8.0)
                position: Cesium.Cartesian3.fromDegrees(108.22690195918085, 36.01883508577498, 8.0), // 纬度, 经度
                // 标记图片
                billboard: {
                    image: '/static/model/address.png', // 图片的URL
                    scale: 0.1//图片缩放大小
                },
                description: '这里是北京市人民大会堂' // 鼠标悬浮时显示的描述
            });
// 创建一个屏幕空间事件处理器（增加标注点的点击弹框自定义样式）
            var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
            // 用于存储点击位置
            var lastClickPosition = null;
            var lon = null;
            var lat = null;
            handler.setInputAction(function (click) {
                const pickedObject = viewer.scene.pick(click.position);
                const { ellipsoid } = viewer.scene.globe;
                console.log(viewer.entities, 'viewer.entities++++')
                const cartesian = viewer.camera.pickEllipsoid(click.position, ellipsoid);
                const cartographic = ellipsoid.cartesianToCartographic(cartesian);
                if (Cesium.defined(pickedObject)) {
                    lon = Cesium.Math.toDegrees(cartographic.longitude);
                    lat = Cesium.Math.toDegrees(cartographic.latitude);
                    lastClickPosition = click.position;
                    // 显示模态框
                    showPopup(lastClickPosition);
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            var modal = document.getElementById('myModal');
            var contentDiv = document.getElementById('modelContent');
            function showPopup(position) {
                // 清空模态框内容
                document.getElementById('modal-body').innerHTML = '';
                // 复制内容到模态框
                var cloneContent = contentDiv.cloneNode(true);
                document.getElementById('modal-body').appendChild(cloneContent);
                modal.style.display = "block";
                // 设置模态框的位置
                updatePopupPosition(position);
                // 添加关闭按钮事件监听
                document.querySelector('.close').addEventListener('click', function () {
                    modal.style.display = "none";
                });
            }
            // 更新弹窗位置
            function updatePopupPosition(position) {
                if (!position || !lastClickPosition) return;
                // 获取当前视图的屏幕边界
                var clientPosition = viewer.canvas.getBoundingClientRect();
                // 计算点击位置相对于浏览器窗口的位置
                var x = position.x - clientPosition.left;
                var y = position.y - clientPosition.top;
                // 设置模态框的位置
                modal.style.left = x + 'px';
                modal.style.top = y + 'px';
            }
            // 监听视图变化事件
            viewer.scene.postRender.addEventListener(function () {
                if (lastClickPosition) {
                    const Cartesian3Result = Cesium.Cartesian3.fromDegrees(lon, lat);
                    const Cartesian2Result222 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Cartesian3Result,);
                    updatePopupPosition(Cartesian2Result222);
                }
            });
            window.addEventListener('unload', function () {
                handler.destroy();
                viewer.destroy();
            });
  // 将3DTiles集添加到Cesium Viewer
            viewer.scene.primitives.add(tileset);
            // // 控制视角到模型位置  自适应大小添加new Cesium.HeadingPitchRange(0.0, -0.5, 0) 到viewer.zoomTo中
            viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, 0));
}