Cesium简单案例

这篇具有很好参考价值的文章主要介绍了Cesium简单案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Cesium组件

1、HTML
<template>
  <div id="cesiumContainer">
    <!-- 地图工具栏 -->
    <ul class="mapTools">
      <li v-for="item in toolsData" :key="item.id" @click="toolsClick(item)">
        <!-- 显示label -->
        <el-tooltip
          v-if="item.id == 1"
          class="item"
          effect="dark"
          :content="item.label"
          placement="left">
          <span class="label">{{ item.text }}</span>
        </el-tooltip>

        <el-tooltip
          v-else
          class="item"
          effect="dark"
          :content="item.label"
          placement="left">
          <!-- 显示icon -->
          <span :class="item.icon" class="icon"></span>
        </el-tooltip>
      </li>
    </ul>

    <!-- 模型信息弹窗-全局注册 -->
    <Popup
      ref="Popup"
      :popupInfo="popupInfo"
      :popupPs="popupPs"
      @message="popupMsg"></Popup>
  </div>
</template>
2、Script
<script>
import * as turf from "@turf/turf";
export default {
  name: "Cesium",
  components: {
    Popup: () => import("./popup.vue"),
  },
  props: {},
  data() {
    return {
      // ----------------------<<地图>>----------------------
      // cesium相机初始位置
      ps: {
        lon: 100,
        lat: 30,
        height: 1000,
      },
      // 地图工具栏列表
      toolsData: [
        {
          id: 1,
          text: "2D",
          label: "2D/3D切换",
          icon: "",
        },
        {
          id: 2,
          label: "开始记录数据",
          icon: "el-icon-video-camera",
        },
        {
          id: 3,
          label: "隐藏模拟航迹",
          icon: "el-icon-s-promotion",
        },
        {
          id: 4,
          label: "暂停飞行",
          icon: "el-icon-video-pause",
        },
        {
          id: 5,
          label: "清除所有模型",
          icon: "el-icon-delete",
        },
      ],

      // -----------测试数据-----------
      // 是否创建测试模型
      isCreate: false,
      // 飞行时间
      flyTime: 0,
      // 点位数组
      pointArr: [
        {
          lon: 100.957787,
          lat: 30.739748,
          height: 100,
          time: 0,
        },
        {
          lon: 100.959787,
          lat: 30.739748,
          height: 100,
          time: 5,
        },
        {
          lon: 100.961787,
          lat: 30.739748,
          height: 100,
          time: 10,
        },
        {
          lon: 100.963787,
          lat: 30.739748,
          height: 100,
          time: 15,
        },
        {
          lon: 100.965787,
          lat: 30.739748,
          height: 100,
          time: 20,
        },
        {
          lon: 100.965787,
          lat: 30.737748,
          height: 100,
          time: 15,
        },
        {
          lon: 100.965787,
          lat: 30.735748,
          height: 100,
          time: 25,
        },
        {
          lon: 100.965787,
          lat: 30.733748,
          height: 100,
          time: 30,
        },
        {
          lon: 100.963787,
          lat: 30.733748,
          height: 100,
          time: 35,
        },
        {
          lon: 100.961787,
          lat: 30.733748,
          height: 100,
          time: 35,
        },
        {
          lon: 100.959787,
          lat: 30.733748,
          height: 100,
          time: 35,
        },
        {
          lon: 100.957787,
          lat: 30.733748,
          height: 100,
          time: 35,
        },
        {
          lon: 100.957787,
          lat: 30.735748,
          height: 100,
          time: 35,
        },
        {
          lon: 100.957787,
          lat: 30.737748,
          height: 100,
          time: 35,
        },
        {
          lon: 100.957787,
          lat: 30.739748,
          height: 100,
          time: 35,
        },
      ],
      // 线条数组
      lineArr: [],
      // 起始时间
      start: "",
      // 结束时间
      stop: "",
      // -----------测试数据-----------

      // 弹窗详细信息
      popupInfo: {},
      // 弹窗位置
      popupPs: {
        x: 0,
        y: 0,
      },
      // 选中模型id
      selModelId: "",
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();
    this.addArrow();
  },
  methods: {
    // -------------------------<<地图>>------------------------
    // 初始化地图
    initMap() {
      // 配置在线地图token
      Cesium.Ion.defaultAccessToken ="在线地图token";

      let imageryProvider;

      // 离线地图-nginx服务
      // const url = `http://127.0.0.1:9000`;
      // imageryProvider = new Cesium.UrlTemplateImageryProvider({
      //   url: `${url}/{z}/{x}/{y}.png`,
      // });

      //在线地图
      // if (window.navigator.onLine){}
      imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });

      window.viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder: false, //右上角搜索
        homeButton: false, //右上角home
        sceneModePicker: false, //右上角2D/3D切换
        baseLayerPicker: false, //右上角地形
        navigationHelpButton: false, //右上角帮助
        animation: true, //左下角圆盘动画控件
        timeline: true, //底部时间轴
        fullscreenButton: false, //右下角全屏控件
        vrButton: false, //如果设置为true,将创建VRButton小部件。
        scene3DOnly: false, // 每个几何实例仅以3D渲染以节省GPU内存
        infoBox: false, //隐藏点击要素后的提示信息
        imageryProvider: imageryProvider, //地图地址
        selectionIndicator: false,
      });

      // 隐藏左下角商标信息
      viewer._cesiumWidget._creditContainer.style.display = "none";
      // 隐藏底部时间轴
      viewer.timeline.container.style.display = "none";
      viewer.scene.globe.depthTestAgainstTerrain = false; //开启深度检测

      // 设置最小缩放级别,以米为单位
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500.0;

      // 设置最大缩放级别,以米为单位
      viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000.0;

      // 隐藏动画控件
      const animationContainer = document.querySelector(
        ".cesium-viewer-animationContainer"
      );
      animationContainer.style.display = "none";

      // 自动播放动画
      viewer.clock.shouldAnimate = true;

      // 启用光照
      viewer.scene.globe.enableLighting = true;

      // 设置相机初始位置
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          this.ps.lon,
          this.ps.lat,
          this.ps.height
        ),
        // 设置相机方向,俯视和仰视的视角
        orientation: {
          heading: Cesium.Math.toRadians(0), //坐标系旋转0度
          pitch: Cesium.Math.toRadians(-90), //设置俯仰角度为-90度
        },
      });

      // --------<<鼠标事件>>--------
      // 移除左键双击默认事件
      // viewer.screenSpaceEventHandler.removeInputAction(
      //   Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      // );
      // 注册左键单击事件
      this.leftClick();
      // 注册右键单击事件
      // this.rightClick();
      // 注册地图拖拽事件
      this.setMouseEvent();
      // 相机移动事件
      viewer.scene.camera.moveEnd.addEventListener(this.updatePopup);
      // 注册地图缩放事件
      this.setWheelEvent();
    },

    // -----------------------<<模型操作>>-----------------------
    // 创建新模型
    addModel(info) {
      if (viewer.entities.getById(info.desc.id)) {
        return;
      }

      // 转换笛卡尔空间直角坐标
      const position = new Cesium.Cartesian3.fromDegrees(
        info.desc.position.lon,
        info.desc.position.lat,
        info.desc.position.height
      );

      //模型朝向
      const heading = Cesium.Math.toRadians(90); // 方位
      const pitch = 0; // 俯仰
      const roll = 0; // 偏移角度
      const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      );

      // ++++++++++<<创建模型>>++++++++++
      const entity = viewer.entities.add({
        id: info.desc.id, //模型id
        name: info.type, // 模型名称,这里用作模型类型,方便模型增删改查
        position: position, //模型位置,高度
        orientation: orientation,
        model: {
          uri: info.desc.path, //模型文件
          minimumPixelSize: 50, //模型最小像素大小
          maximumScale: 100, //模型最大像素大小
          color: Cesium.Color.WHITE,
        },
        description: info.desc, // 模型详细信息
      });
    },

    // 创建点位
    addPoint(ps) {
      // 添加点位
      viewer.entities.add({
        name: "point", // 所属的父级id
        position: Cesium.Cartesian3.fromDegrees(
          ps.lon,
          ps.lat,
          ps.height // 高度可以自己定义,也可以根据传进来的高度进行绘制
        ),
        point: {
          pixelSize: 5,
          // 点位颜色,fromCssColorString 可以直接使用CSS颜色
          color: Cesium.Color.fromCssColorString("tomato"),
          // 边框颜色
          outlineColor: Cesium.Color.fromCssColorString("#fff"),
          // 边框宽度(像素)
          outlineWidth: 2,
          // 显示在距相机的距离处的属性,多少区间内是可以显示的
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            15000000
          ),

          // 是否开启深度监测
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });
    },

    // 创建线条
    addLine() {
      if (this.lineArr.length == 0) {
        return;
      }

      // 航迹线id
      let id = `line`;

      viewer.entities.add({
        id, //  模型id
        name: "line", // 所属的父级id
        // polyline 折线
        polyline: {
          // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.lineArr),
          // 注:线条起止,可以获取鼠标点击位置的经纬度进行线条绘制

          // 宽度
          width: 2,

          // 线的颜色
          material: Cesium.Color.fromCssColorString("tomato"), //  "tomato"

          clampToGround: false, // 不紧贴地面

          // 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
          zIndex: 999,

          // 显示在距相机的距离处的属性,多少区间内是可以显示的
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            15000000
          ),

          // 是否显示
          show: true,
        },
      });
    },

    // 添加箭头
    addArrow() {
      let arr = [0, 45, 90, 135, 180, -135, -90, -45];
      var pixelOffset, endPs, entity, labelEntity;
      arr.forEach((item) => {
        // 计算箭头结束点
        endPs = this.calcArrowEndPosition([100.9621, 30.7368], 0.1, item);

        entity = viewer.entities.add({
          polyline: {
            name: "arrow",
            positions: [
              Cesium.Cartesian3.fromDegrees(100.9621, 30.7368),
              Cesium.Cartesian3.fromDegrees(endPs.lon, endPs.lat),
            ],
            width: 10,
            material: new Cesium.PolylineArrowMaterialProperty(
              Cesium.Color.CYAN
            ),
            vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
          },
          // 显示在距相机的距离处的属性,多少区间内是可以显示的
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            15000000
          ),
        });

        // 调整label偏移位置
        if (item == 45 || item == -45 || item == 0) {
          pixelOffset = new Cesium.Cartesian2(0, -10);
        } else if (item == 135 || item == -135 || item == 180) {
          pixelOffset = new Cesium.Cartesian2(0, 10);
        } else if (item == 90) {
          pixelOffset = new Cesium.Cartesian2(20, 0);
        } else if (item == -90) {
          pixelOffset = new Cesium.Cartesian2(-20, 0);
        }

        // 创建标签实体
        labelEntity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(endPs.lon, endPs.lat), // 点位坐标
          point: {
            pixelSize: 0, // 点位大小
            color: Cesium.Color.WHITE.withAlpha(0), // 点位颜色,透明
          },
          label: {
            text: `${item}度`, // 文本内容
            font: "18px monospace", // 字体样式
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, // label样式
            outlineWidth: 2, // 外边框宽度
            verticalOrigin: Cesium.VerticalOrigin.CENTER, // 文字对齐方式BOTTOM,TOP,CENTER
            pixelOffset: pixelOffset, // (0:经度偏移,0:纬度偏移)
          },
        });
        labelEntity.label.fillColor = Cesium.Color.WHITE; // 设置填充颜色为白色
        labelEntity.label.outlineColor = Cesium.Color.RED; // 设置轮廓颜色为红色
      });
    },

    // 计算箭头结束点
    calcArrowEndPosition(ps, range, angel) {
      var pt = turf.point(ps, { "marker-color": "F00" }); // 起始点
      var distance = range; // 距离
      var bearing = angel; // 角度
      var options = { units: "miles" }; // 英里
      var destination = turf.rhumbDestination(pt, distance, bearing, options);

      return {
        lon: destination.geometry.coordinates[0],
        lat: destination.geometry.coordinates[1],
      };
    },

    // 根据id删除模型
    removeEntitiesById(id) {
      // 根据id获取实体
      let entities = viewer.entities.getById(id);
      // 删除实体
      viewer.entities.remove(entities);
    },

    // 删除所有模型
    delAllModel() {
      // 删除所有模型
      viewer.entities.removeAll();

      // 关闭popup
      this.$refs.Popup.closePopup();

      this.lineArr = [];

      if (this.isCreate) {
        this.addTrack();
        this.addModels();
      }
    },

    // 选中模型
    clickModel(id, type, row = {}) {
      // 取消选中模型
      this.cancelPopup();

      // 选中模型id
      this.selModelId = id;

      // 获取点击模型的实体
      let entities = viewer.entities.getById(id);

      // 点击模型添加选中颜色
      entities.model.color = Cesium.Color.RED;

      switch (type) {
        case 1:
          // 显示弹窗
          this.$refs.Popup.openPopup();
          break;
        case 2:
          // 获取模型信息
          this.popupInfo = JSON.parse(JSON.stringify(row));

          // 获取cartesian3坐标
          const cartesian3 = Cesium.Cartesian3.fromDegrees(
            row.position.lon,
            row.position.lat,
            row.position.height
          );

          // cartesian3转换为cartesian2坐标(屏幕坐标)
          this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            cartesian3
          );

          // 显示弹窗
          this.$refs.Popup.openPopup();
          break;
      }
    },

    // 取消选中模型
    cancelPopup() {
      this.selModelId = "";

      // 获取所有模型的实体集合
      const entitiesArr = viewer.entities.values;

      if (entitiesArr.length !== 0) {
        // 取消所有模型选中颜色
        for (let i = 0; i < entitiesArr.length; i++) {
          if (entitiesArr[i]._name == "model") {
            entitiesArr[i].model.color = Cesium.Color.WHITE;
          }
        }
      }

      // 关闭消息显示框
      this.$refs.Popup.closePopup();
    },

    // -----------------------<<鼠标事件>>-----------------------
    // 左键单击
    leftClick() {
      // 添加用户输入监听范围(element)
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      // 处理用户输入事件
      handler.setInputAction((event) => {
        let pick = viewer.scene.pick(event.position);

        if (Cesium.defined(pick)) {
          if (pick.id._name !== "model") {
            return;
          }

          // 选中模型样式
          this.clickModel(pick.id._id, 1);

          // 获取模型信息
          this.popupInfo = JSON.parse(
            JSON.stringify(pick.id._description._value)
          );

          // 获取cartesian3坐标
          const cartesian3 = pick.id._position._value;

          // cartesian3转换为cartesian2坐标(屏幕坐标)
          this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            cartesian3
          );
        } else {
          this.cancelPopup();
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },

    // 右键单击
    rightClick() {
      // 添加用户输入监听范围(element)
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // 处理用户输入事件
      handler.setInputAction((event) => {
        // 获取pick拾取对象
        let pick = viewer.scene.pick(event.position);
        // 判断是否获取到了pick,获取到了,拾取模型信息,未获取到,添加点位
        if (!Cesium.defined(pick)) {
          const position = viewer.scene.camera.pickEllipsoid(
            event.position,
            viewer.scene.globe.ellipsoid
          );

          // 笛卡尔坐标转弧度
          let cartographic = Cesium.Cartographic.fromCartesian(
            position,
            viewer.scene.globe.ellipsoid,
            new Cesium.Cartographic()
          );

          // Cesium.Math.toDegrees 弧度转度,将弧度转换成经纬度
          let lon = Cesium.Math.toDegrees(cartographic.longitude);
          let lat = Cesium.Math.toDegrees(cartographic.latitude);

          console.log(lon + "," + lat);

          // 创建点位
          this.addPoint({
            lon,
            lat,
            height: 10,
          });

          // 存储点位
          this.pointArr.push({
            lon,
            lat,
            height: 10,
            time: "",
          });
          // 存储线条点位
          this.lineArr.push(lon, lat, 10);
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    // 地图拖拽
    setMouseEvent() {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      // *****注册鼠标右键按下事件*****
      handler.setInputAction((event) => {
        let pick = viewer.scene.pick(event.position);

        // *****注册鼠标移动事件*****
        viewer.screenSpaceEventHandler.setInputAction((arg) => {
          // 更新弹框位置
          this.updatePopup();
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // *****注册鼠标抬起事件*****
        viewer.screenSpaceEventHandler.setInputAction(({ position }) => {
          // *****解除viewer的MOUSE_MOVE事件监听器*****
          viewer.screenSpaceEventHandler.removeInputAction(
            Cesium.ScreenSpaceEventType.MOUSE_MOVE
          );

          // 解除相机锁定
          viewer.scene.screenSpaceCameraController.enableZoom = true;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    },

    // 地图缩放事件
    setWheelEvent() {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      // 处理用户输入事件
      handler.setInputAction((event) => {
        // 更新弹框位置
        this.updatePopup();
      }, Cesium.ScreenSpaceEventType.WHEEL);
    },

    // 鼠标双击事件
    leftDoubleClick() {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      // 处理用户输入事件
      handler.setInputAction((event) => {
        let pick = viewer.scene.pick(event.position);

        if (Cesium.defined(pick)) {
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    },

    // -----------------------<<其他操作>>-----------------------
    // 更新信息弹框位置
    updatePopup() {
      // 获取选中模型
      if (!this.selModelId) {
        return;
      }

      let entities = viewer.entities.getById(this.selModelId);

      this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        viewer.scene,
        entities._position._value
      );
    },

    // 子组件消息
    popupMsg() {
      // 取消选中模型
      this.cancelPopup();
    },

    // 工具栏点击事件
    toolsClick(item) {
      switch (item.id) {
        case 1: // 2D/3D切换
          if (item.text == "3D") {
            item.text = "2D";

            // 切换为3D
            viewer.scene.morphTo3D(0);
          } else {
            item.text = "3D";

            // 切换为2D
            viewer.scene.morphTo2D(0);
          }
          break;

        case 2: // 数据记录
          if (item.icon == "el-icon-video-camera") {
            item.icon = "el-icon-video-camera-solid";
            item.label = "停止记录数据";

            this.$message.success("开始记录数据");
          } else {
            item.icon = "el-icon-video-camera";
            item.label = "开始记录数据";

            this.$message.success("停止记录数据");
          }

          break;

        case 3: // 隐藏模拟航迹
          // 获取所有模型的实体集合
          const entitiesArrS = viewer.entities.values;

          // 临时数组
          const tempS = [];

          // 将模型实体深拷贝
          if (entitiesArrS.length !== 0) {
            for (let i = 0; i < entitiesArrS.length; i++) {
              if (
                entitiesArrS[i]._name == "point" ||
                entitiesArrS[i]._id == "line"
              ) {
                tempS.push(entitiesArrS[i]);
              }
            }
          }

          // 如果有航迹-隐藏航迹,否则显示航迹
          if (tempS.length !== 0) {
            item.icon = "el-icon-position";
            item.label = "显示模拟航迹";

            // 航迹点清空
            this.lineArr = [];

            // 删除航迹点
            tempS.forEach((item) => {
              this.removeEntitiesById(item._id);
            });
          } else {
            item.icon = "el-icon-s-promotion";
            item.label = "隐藏模拟航迹";

            // 添加航迹
            this.addTrack();
          }
          break;

        case 4: // 飞机飞行控制
          // 停止动画
          if (viewer.clock.multiplier == 1) {
            viewer.clock.multiplier = 0;
            item.icon = "el-icon-video-play";
            item.label = "继续飞行";
          } else {
            viewer.clock.multiplier = 1;
            item.icon = "el-icon-video-pause";
            item.label = "暂停飞行";
          }
          break;

        case 5: // 清除所有模型
          this.delAllModel();
          break;
      }

      this.cancelPopup();
    },

    // ----------<<自动飞行测试>>----------
    addTrack() {
      if (this.lineArr.length !== 0) {
        return;
      }
      // 创建航迹点
      for (let i = 0; i < this.pointArr.length; i++) {
        // 绘制点位
        this.addPoint({
          lon: this.pointArr[i].lon,
          lat: this.pointArr[i].lat,
          height: this.pointArr[i].height,
        });

        // 存储点位绘制航迹
        this.lineArr.push(
          this.pointArr[i].lon,
          this.pointArr[i].lat,
          this.pointArr[i].height
        );
      }

      // 绘制航迹
      this.addLine();
    },
    addModels() {
      this.isCreate = true;
      // 计算时间飞行数据
      let property = this.computeFlight(this.pointArr);

      // ++++++++++<<创建模型>>++++++++++
      const entity = viewer.entities.add({
        id: `testModel`, //模型id
        name: "model", // 模型名称,这里用作模型类型,方便场景模型增删改查
        // 和时间轴关联
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: this.start,
            stop: this.stop,
          }),
        ]),
        position: property, //模型位置,高度
        orientation: new Cesium.VelocityOrientationProperty(property),
        model: {
          uri: "./Cesium/model/air/test1.gltf", //模型文件
          minimumPixelSize: 80, //模型最小像素大小
          maximumScale: 100, //模型最大像素大小
        },
      });
    },
    // 移动
    modelMove() {
      if (this.lineArr.length == 0) {
        return;
      }

      for (let i = 0; i < this.pointArr.length; i++) {
        this.pointArr[i].time = this.flyTime;

        this.flyTime += 3;
      }

      // 起始时间
      this.start = Cesium.JulianDate.fromDate(new Date());
      // 结束时间
      this.stop = Cesium.JulianDate.addSeconds(
        this.start,
        this.pointArr[this.pointArr.length - 1].time,
        new Cesium.JulianDate()
      );

      // 设置始时钟始时间
      viewer.clock.startTime = this.start.clone();
      // 设置时钟当前时间
      viewer.clock.currentTime = this.start.clone();
      // 设置始终停止时间
      viewer.clock.stopTime = this.stop.clone();
      // 时间速率,数字越大时间过的越快
      viewer.clock.multiplier = 1;
      // 时间轴
      viewer.timeline.zoomTo(this.start, this.stop);
      // 循环执行,即为2,到达终止时间,重新从起点时间开始LOOP_STOP
      // viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

      // 创建模型
      this.addModels();
    },
    // 计算飞行
    computeFlight(source) {
      // 取样位置 相当于一个集合
      let property = new Cesium.SampledPositionProperty();
      for (let i = 0; i < source.length; i++) {
        let time = Cesium.JulianDate.addSeconds(
          this.start,
          source[i].time,
          new Cesium.JulianDate()
        );
        let position = Cesium.Cartesian3.fromDegrees(
          source[i].lon,
          source[i].lat,
          source[i].height
        );
        // 添加位置,和时间对应
        property.addSample(time, position);
      }
      return property;
    },
    // ----------<<自动飞行测试>>----------
  },
};
</script>
3、Css
<style lang="less" scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: relative;

  .mapTools {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 5px;
    // background: rgba(255, 255, 255, 0.9);
    background-color: rgba(#001c22, 0.8);
    z-index: 999;

    li {
      width: 35px;
      height: 35px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      cursor: pointer;

      .icon {
        font-size: 20px;
      }

      &:hover {
        background: #087b7a;
        color: #fff;
      }
    }
  }
}
</style>

二、Popup组件

1、HTML
<template>
  <div
    class="cesiumPopup"
    :style="{ top: popupPs.y + 'px', left: popupPs.x + 'px' }"
    v-if="show">
    <!-- 头部 -->
    <ul class="head">
      <li>
        <span>设备信息</span>
      </li>
      <li>
        <span class="el-icon-close" @click="closePopup"></span>
      </li>
    </ul>

    <!-- 模型内容 -->
    <ul class="content">
      <li>
        <span class="subTitle">模型标识</span>
        <span class="subValue">{{ popupInfo.id }}</span>
      </li>
      <li>
        <span class="subTitle">模型名称</span>
        <span class="subValue">{{ popupInfo.name }}</span>
      </li>
      <li>
        <span class="subTitle">模型地址</span>
        <span class="subValue">{{ popupInfo.ip }}</span>
      </li>
      <li>
        <span class="subTitle">模型端口</span>
        <span class="subValue">{{ popupInfo.port }}</span>
      </li>
      <li>
        <span class="subTitle">模型位置</span>
        <span class="subValue">{{
          `${filterNumber(popupInfo.position.lon, 6)},${filterNumber(
            popupInfo.position.lat,
            6
          )},${popupInfo.position.height}`
        }}</span>
      </li>
      <li>
        <span class="subTitle">模型状态</span>
        <span
          class="subValue"
          :style="popupInfo.status == 1 ? 'color:#04F44C' : 'color:#F52E2E'"
          >{{ popupInfo.status == 1 ? "正常" : "异常" }}</span
        >
      </li>
    </ul>
  </div>
</template>
2、Script
<script>
export default {
  name: "Popup",
  components: {},
  props: {
    popupInfo: {
      type: Object,
      default: () => {
        return {
          id: "",
          position: {
            lon: "",
            lat: "",
            alt: "",
          },
          status: "",
          ip: "",
          isSelect: "",
          name: "",
          port: "",
        };
      },
    },
    popupPs: {
      type: Object,
      default: () => {
        return {
          x: 0,
          y: 0,
        };
      },
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    openPopup() {
      this.show = true;
    },
    closePopup() {
      this.show = false;
    },
    // 过滤数据
    filterNumber(val, digit) {
      return val.toFixed(digit);
    },
  },
};
</script>
3、Css
<style lang="less" scoped>
.cesiumPopup {
  min-width: 300px;
  position: absolute;
  transform: translate(-50%, -130%);
  z-index: 1;
  background-color: rgba(#001c22, 0.8);
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;

  .head {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #048197;
    padding: 0px 10px;
    box-sizing: border-box;
    box-shadow: inset -2px 0px 2px rgba(#333, 0.5),
      inset 2px 2px 2px rgba(#fff, 0.5);

    .el-icon-close {
      font-size: 16px;
      cursor: pointer;

      &:hover {
        color: tomato;
      }
    }
  }

  .content {
    height: 85%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: inset -2px -2px 2px rgba(#333, 0.5),
      inset 2px 0px 2px rgba(#5696a2, 0.7);

    li {
      margin: 5px 0px;
      display: flex;
      align-items: center;

      .subTitle {
        width: 20%;
        display: inline-block;
        background-color: #013946;
        border: 1px solid #119ea0;
        margin-right: 5px;
        padding: 1px 5px;
      }
      .subValue {
        width: 80%;
        display: inline-block;
        border: 1px solid #119ea0;
        box-sizing: border-box;
        padding: 1px 5px;
      }
    }
  }
}
</style>

文章来源地址https://www.toymoban.com/news/detail-855342.html

到了这里,关于Cesium简单案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果

    Demo ThreeModelBoom.vue index.vue

    2024年02月11日
    浏览(40)
  • CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)

    简述:Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可

    2024年02月10日
    浏览(45)
  • 迈向三维:vue3+Cesium.js三维WebGIS项目实战

    写在前面:随着市场对数字孪生的需求日益增多,对于前端从业者的能力从对框架vue、react的要求,逐步扩展到2D、3D空间的交互,为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅,从实战项目入门,挖掘Cesium.js API,并逐步丰富项目

    2024年04月24日
    浏览(64)
  • 【JavaScript】案例1:使用JS完成注册页面校验

    🔎这里是【JavaScript】,关注我学习前端不迷路 👍如果对你有帮助,给博主一个免费的点赞以示鼓励 欢迎各位🔎点赞👍评论收藏⭐️ 【JavaScript】 目前主要更新JavaScript,一起学习一起进步。 本期主要介绍案例1:使用JS完成注册页面校验 1. 需求说明 2. 知识讲解-JavaScript(

    2024年02月06日
    浏览(44)
  • 【JavaScript】JS实用案例分享:动态生成分页组件 | 通过按键实现移动控制

    CSDN话题挑战赛第2期 参赛话题:学习笔记 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路( 源创征文一等奖作品 ):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 🧑‍💼 个人简介

    2023年04月21日
    浏览(66)
  • 零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念

    该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识 HTML,CSS,JavaScript 都是单独的语言;他们构成前端技术基础; (1)HTML:负责网页的架构; (2)CSS:负责网页的样式,美化; (3)JavaScript(JS):负责

    2024年02月08日
    浏览(51)
  • SpringBoot+MyBatisPlus+MySql+vue2+elementUi的案例、java访问数据库服务、java提供接口服务

    1、项目不使用前后端分离。 2、在创建 SpringBoot 的时候要注意各个插件间的版本问题。 3、后端技术 SpringBoot + MyBatisPlus + MySql 。 4、前端技术 vue2 + elementUi 。 简单介绍 1、数据库名称 ssm_db 2、表名称 tbl_book 数据表对象文件(Book.java) 配置文件(application.yml) 创建项目后,在 resou

    2024年02月10日
    浏览(48)
  • 整合vue elementui springboot mybatisplus前后端分离的 简单增加功能 删改查未实现

    涉及知识点 1.springboot项目启动创建  配置yml文件 2.mybatisplus的使用 3.vue的vite文件配置 4.vue springboot 前后端数据交互 1.建立项目的配置文件 src/main/resources/application.yml 2.建立项目 pom.xml 3.建立数据库表 4.建立实体类 cn.webrx.pojo.User 5.建立项目入口程序App cn.webrx.App 6.建立sevices axi

    2024年02月07日
    浏览(46)
  • 用js做一个简单的网页,用javascript做一个网页

    大家好,小编为大家解答用javascript写简单网页家乡的介绍代码的问题。很多人还不知道用javascript写简单网页小游戏,现在让我们一起来看看吧! 八、JavaScript基础 1.JavaScript JavaScript简称JS是用于制作网页的动态效果的,如:页面的弹出广告、浮动广告、下拉菜单、表单验证等

    2024年02月03日
    浏览(45)
  • js截取video视频某一帧做封面的简单案例

    可以使用 canvas 元素来截取视频某一帧并生成封面。 首先,在 video  标签上设置视频源地址和自动播放属性: 然后,在 canvas  标签上定义宽高和样式,并通过 JavaScript 获取视频元素和 canvas 元素: 接着,定义一个函数来截取视频某一帧,并将其渲染到 canvas 上: 在需要生成

    2024年02月04日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包