Cesium初使用

//下载
npm install cesium --save

//引入
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
// 配置 Cesium 资源路径
window.CESIUM_BASE_URL = '/node_modules/cesium/Build/Cesium/'


<!-- Cesium 模型 -->
<div id="cesiumContainer"></div>


const viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false, // 不显示动画控件
        homeButton: false, // 不显示主页按钮
        baseLayerPicker: false, // 不显示基础图层选择器
        timeline: false, // 不显示时间轴
        fullscreenButton: true, // 显示全屏按钮
        scene3DOnly: true, // 只使用 3D 场景
        infoBox: true, // 显示信息框
        imageryProvider: null, // 不使用影像提供者
        navigationHelpButton: false, // 不显示导航帮助按钮
        navigationInstructionsInitiallyVisible: false, // 不显示导航说明
        sceneModePicker: false, // 不显示场景模式选择器
        shouldAnimate: false, // 不自动播放动画 
        creditContainer: document.createElement('div') //隐藏版权信息！！
    });
    const modelPosition = Cesium.Cartesian3.fromDegrees(113.519074, 23.148807, 0)

    // 创建 entity 实例放入地图
    // 批量加载模型
    const models = [
      { name: 'one Model', uri: '/demo2.glb', position: [113.519074, 23.148807, 0] },
      { name: 'two Model', uri: 'demo.glb', position: [113.53, 23.148807, 50] },
      { name: 'three Model', uri: '/car/scene.gltf', position: [113.53, 23.15, 0], scale: 20 }
    ]
    models.forEach(model => {
      viewer.entities.add({
        name: model.name,
        position: Cesium.Cartesian3.fromDegrees(...model.position),
        model: {
          uri: model.uri,
          scale: model.scale || 10,
          maximumScale: 20,
          minimumPixelSize: 100
        }
      })
    })
    // 鼠标移动事件监听
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handler.setInputAction((movement) => {
        const pickedObject = viewer.scene.pick(movement.endPosition);
        // 移除之前的标签
        const previousLabel = viewer.entities.getById('hover-label');
        if (previousLabel) {
            viewer.entities.remove(previousLabel);
        }
        // 判断是否滑过某个实体
        if (Cesium.defined(pickedObject) && pickedObject.id instanceof Cesium.Entity) {
            const label = viewer.entities.add({
                position: pickedObject.id.position,
                label: {
                    text: `这里是 ${pickedObject.id.name} 的信息`,
                    font: '14px monospace',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 2,
                    showBackground: true,
                    backgroundColor: Cesium.Color.WHITE.withAlpha(0.6),
                    pixelOffset: new Cesium.Cartesian2(0, -45)
                }
            });
            // 使用自定义属性来存储标识信息
            label.customId = 'hover-label';
        }
        // 这里可以添加额外的逻辑来确保在滑出时移除标签
        else {
            // 确保没有实体被选中时移除标签
            const allEntities = viewer.entities.values;
            for (let i = 0; i < allEntities.length; i++) {
                if (allEntities[i].customId === 'hover-label') {
                    viewer.entities.remove(allEntities[i]);
                    break;
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // 让相机飞到模型的位置
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(113.519074, 23.148807, 500)
    });

    // 鼠标点击事件监听
    // handler.setInputAction(function (click) {
    //     const pickedObject = viewer.scene.pick(click.position);
    //     if (Cesium.defined(pickedObject) && pickedObject.id) {
    //         viewer.infoBox.show(pickedObject.id.name, `模型名称: ${pickedObject.id.name}`);
    //     } else {
    //         viewer.infoBox.hide();
    //     }
    // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);



// 创建 GltfLoader 实例    这个方式生成不出来？
  // const loader = new Cesium.GltfLoader({
  //     url: '/demo.glb', // 模型文件的路径
  //     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(modelPosition), // 设置模型的位置和方向
  //     scale: 10.0, // 设置模型的缩放比例
  //     maximumScale: 20.0, // 设置模型的最大缩放比例
  //     minimumPixelSize: 50, // 设置模型的最小像素大小
  //     gltfResource: new Cesium.Resource({
  //         url: '/demo.glb' // 确保 url 是有效的
  //     })
  // });

  //     loader.load().then((model) => {
  //     console.log('加载的模型:', model);
  //     // if (model && typeof model.update === 'function') {
  //     //     viewer.scene.primitives.add(model);
  //     // } else {
  //     //     console.error('加载的模型不是有效的图元:', model);
  //     // }
  // }).catch((error) => {
  //     console.error('模型加载失败:', error);
  // });