可视化大屏-03

使用Cesium加载3dtiles文件并添加动画及交互操作

扬中粉尘看板录制

先安装cesium：

npm install cesium --save

使用参考：【vue2 + Cesium】使用Cesium、添加第三方地图、去掉商标、Cesium基础配置、地图放大缩小事件、获取可视区域、层级、高度
需要使用申请的token：

Cesium.Ion.defaultAccessToken = 'xxxxxxxxxx'

然后初始化：

            // 初始化CesiumJS
            this.viewer = new Cesium.Viewer('container', {
              animation: false, //是否显示动画控件
              baseLayerPicker: false, // 隐藏图层选择控件
              // baseLayerPicker: true, // 隐藏图层选择控件
              geocoder: false, // 隐藏地名查找控件
              timeline: false, // 隐藏时间线控件
              sceneModePicker: false, // 是否显示投影方式控件
              // creditContainer:false,
              navigationHelpButton: false, // 是否显示帮助信息控件
              fullscreenButton: false, // 是否显示全屏按钮
              infoBox: false, // 是否显示点击要素之后显示的信息
              homeButton: false, // 隐藏Home按钮
              // imageryProviderViewModels: [], // 不显示图层选择
              imageryProviderViewModels: [], // 禁用底图
              terrainProviderViewModels: [], // 禁用地形
              terrainProvider: new Cesium.createWorldTerrain({
                requestWaterMask: true, // 启用水面特效
              }),
              sceneMode: Cesium.SceneMode.SCENE3D, // 选择 3D 模式
              selectionIndicator: false,
            });
            // 创建Cesium3D Tiles加载器
            const tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
              url: 'http://192.168.9.29:5500/tileset.json' // 你的 3D Tiles 数据路径
            }));

            this.viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.3, -0.5, 1400));

使用如下绘制图片和文字框：

dangerIconMark(stationItem,startPosition,showImgUrl,markImg2){
      let that = this;
      var x = 1;
      var flog = true;
      that.billboard.push(that.viewer.entities.add({
        stationItem: stationItem,
        position: startPosition,
        billboard: {
          image: new Cesium.CallbackProperty(function () {
            if (flog) {
              x = x - 0.05;
              if (x <= 0) {
                flog = false;
              }
            } else {
              x = x + 0.05;
              if (x >= 1) {
                flog = true;
              }
            }
            return x >= 0.5 ? showImgUrl : markImg2;
          },false),
          scale: 0.5,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          // eyeOffset: Cesium.Cartesian3(0, 0, 0),
          //文本的偏移方向
          pixelOffset : new Cesium.Cartesian2(0, -20)
        },
        // 添加图片标记点1
        label:that.displayName?{
          //文字内容
          text :  stationItem.name,
          //文字填充颜色
          fillColor : Cesium.Color.WHITE,
          //文本大小与字体
          font:'normal 15px Microsoft YaHei UI',
          //是否显示背景
          showBackground : true,
          //背景墙的颜色
          backgroundColor:Cesium.Color.fromCssColorString("rgb(0,0,0,0.3)"),
          //背景宽度
          backgroundPadding : new Cesium.Cartesian2(10, 5),
          //文字与背景墙的总大小
          scale : 1,
          //文本轮廓
          // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          //外边界颜色
          outlineColor : Cesium.Color.BLACK,
          //外边界宽度
          outlineWidth : 2,
          //文本出现的位置
          verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
          //文本的偏移方向
          pixelOffset : new Cesium.Cartesian2(0, -40)
        }:{}
      }))
    },

监听点击事件：

handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
        that.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
that.viewer.screenSpaceEventHandler.setInputAction(function (e) {
   var pick = that.viewer.scene.pick(e.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

监听鼠标悬浮事件

 // 监听鼠标移动事件
        that.viewer.screenSpaceEventHandler.setInputAction(function (movement) {
          // 使用 pick方法判断鼠标是否悬浮在实体上
          var pickedObject = that.viewer.scene.pick(movement.endPosition);

          // 删除 labelBox 实体
          that.viewer.entities.remove(that.labelBox);
          that.viewer.entities.values.forEach(entity => {
            if(entity.delLabel){
              that.viewer.entities.remove(entity);
            }
          });
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

仅供参考