yunkunMap/src/views/carInfo.vue

<template>
  <div class="map-container">
    <div class="container-top">
      <div class="next-stand">
        <img src="../assets/images/next.png" alt="" />
        <span>0</span>
      </div>
      <div class="real-time">
        <img src="../assets/images/realTime.png" alt="" />
        <span>{{ mileData.mile ? ileData.mile : 0 }}</span>
      </div>
    </div>
    <div class="albuginea backBtn" @click="initTilesetLayer()">
      {{ show3D ? "关闭" : "开启" }}三维
    </div>
    <div class="albuginea" @click="$router.back()">
      <i class="el-icon-back"></i> 返回
    </div>
    <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
    <!--  <div class="video-list">
      <grids></grids>
    </div> -->
  </div>
</template>

<script>
import MarsMap from "@/components/mars-map";
import grids from "@/components/grids.vue";
import { getCarIdInfo } from "@/api/yunkun/index.js";
import { historyLine, carMidle, getCarPoint } from "@/api/yunkun/yunkun.js";
export default {
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      mileData: {
        mile: "", //已经行驶多少里程
      },
      queryParams: {
        startTime: undefined,
        endTime: undefined,
      },
      map: null,
      mapLayer: {},
      show3D: false,
      options: {
        scene: {
          center: {
            lat: 31.184348,
            lng: 120.625126,
            alt: 6764.6,
            heading: 357.9,
            pitch: -31.5,
          },
        },
        control: {
          contextmenu: { preventDefault: false, hasDefault: false },
        },
        terrain: { show: false },
        basemaps: [
          {
            name: "影像地图",
            type: "xyz",
            url: process.env.VUE_APP_BASE_API2 + "/map/{z}/{y}/{x}.png",
            minimumLevel: 1,
            maximumLevel: 16,
            show: true,
          },
          // {
          //   name: "mapbox影像图",
          //   icon: "img/basemaps/mapboxSatellite.png",
          //   type: "mapbox",
          //   username: "sharealex",
          //   styleId: "cly5i21fn00e901prgq643t4r",
          //   token:
          //     "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
          //   tilesize: 256,
          //   scaleFactor: false,
          //   show: false,
          // },
        ],
      },
      Line: [],
      carUrl: basePathUrl + "static/qiche.gltf",
    };
  },
  components: { MarsMap, grids },
  beforeDestroy() {
    this.mapLayer.car.remove();
    this.mapLayer.car = null;
  },
  created() {
    console.log(process.env.VUE_APP_BASE_API, "ssssss");
    const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
    this.queryParams = {
      carId: this.$route.query.carId,
      startTime: startOfDay,
      endTime: endOfDay,
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    /**地图渲染完毕 */
    mapLoad(map) {
      map.set;
      this.map = map;
      map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
      // 创建矢量图层
      this.mapLayer.Line = new mars3d.layer.GraphicLayer();
      this.map.addLayer(this.mapLayer.Line);

      this.mapLayer.car = new mars3d.layer.GraphicLayer();
      this.map.addLayer(this.mapLayer.car);

      this.createLine();
      this.createCar();
    },
    /**
     * 加载姑苏区三维图层
     */
    initTilesetLayer() {
      if (this.map) {
        if (!this.mapLayer.tiles3dLayer) {
          this.mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
            name: "姑苏区建筑物",
            url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
            maximumScreenSpaceError: 16,
            maximumMemoryUsage: 1024 / 2,
            dynamicScreenSpaceError: false,
            skipLevelOfDetail: true,
            preferLeaves: true,
            flyTo: false,
            style: {
              color: {
                conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
              },
            },
          });
          this.map.addLayer(this.mapLayer.tiles3dLayer);
          this.show3D = true;
        } else {
          this.mapLayer.tiles3dLayer.show = !this.mapLayer.tiles3dLayer.show;
          this.show3D = !this.show3D;
        }
      } else {
      }
    },
    // 绘制历史轨迹线 -- 起点坐标
    async createLine() {
      let result = await historyLine(this.queryParams);
      this.Line = result.list;

      const marker = new mars3d.graphic.BillboardEntity({
        position: this.Line[0],
        style: {
          image: require("../assets/images/origin.png"),
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true,
          pixelOffsetY: 5,
        },
      });
      this.mapLayer.Line.addGraphic(marker);
      const line = new mars3d.graphic.PolylineEntity({
        positions: this.Line,
        style: {
          width: 10,
          color: "#00F7AC",
          outline: true,
          outlineColor: "#008DF8",
          outlineWidth: 5,
          clampToGround: true,
        },
      });
      this.mapLayer.Line.addGraphic(line);
      const lastPoint = this.Line[this.Line.length - 1];

      this.map.flyToPoint(
        new mars3d.LngLatPoint(
          parseFloat(lastPoint.lng),
          parseFloat(lastPoint.lat)
        )
      );
    },

    //创建实时车辆漫游
    createCar() {
      const car = new mars3d.graphic.FixedRoute({
        id: this.queryParams.carId,
        name: "漫游对象",
        // positions: [[parseFloat(lastPoint.lng), parseFloat(lastPoint.lat)]],
        // camera: {
        //   type: "gs",
        //   heading: 0,
        //   radius: 3000,
        // },
        model: {
          show: true,
          url: this.carUrl,
          scale: 0.5,
          minimumPixelSize: 30,
          silhouette: true,
          silhouetteColor: "#FFB200",
          pitch: 0,
          roll: 0,
          // heading: parseFloat(lastPoint.drct),
        },
        circle: {
          radius: 200,
          materialType: mars3d.MaterialType.CircleWave,
          materialOptions: {
            color: "#FFB200",
            count: 2,
            speed: 6,
          },
        },
        polyline: {
          width: 10,
          color: "#00F7AC",
          outline: true,
          outlineColor: "#008DF8",
          outlineWidth: 5,
          clampToGround: true,
        },
      });
      this.mapLayer.car.addGraphic(car);
      // let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
      // this.bindPopup(car, res.data);
      // car.openPopup();
      // car.start();

      const interval = 15;
      this.changePosition(interval);
      // this.time = setInterval(() => {
      //   this.changePosition(interval);
      // }, interval * 1000);
    },
    async changePosition(interval) {
      let list = await this.carPoint();
      let carItem = this.mapLayer.car.getGraphicById(this.queryParams.carId);
      // carItem.model.heading = parseFloat(list[0].drct);
      // console.log(carItem.model.heading, "sss");
      //StyleOptions({
      //   heading:parseFloat(list[0].drct)
      // })
      let position = Cesium.Cartesian3.fromDegrees(
        parseFloat(list[0].lng),
        parseFloat(list[0].lat),
        30
      );
      carItem.addDynamicPosition(position, interval);
    },
    /**获取车辆接口 */
    async carPoint() {
      let res = await getCarPoint({
        carIds: this.queryParams.carId,
      });
      return res.list;
    },

    // 车辆弹窗
    bindPopup(fixedRoute, data) {
      const userList = data.userList.map((item) => {
        return `<div class="popup-item">
              <div class="popup-lable">${item.name}：</div>
              <div class="popup-value">${item.ename}</div>
            </div>`;
      });

      const zbList = data.zbList.map((item) => {
        return `<div class="popup-item">
              <div class="popup-lable">${item.thingType}：</div>
              <div class="popup-value">${item.type}</div>
            </div>`;
      });

      let html = `<div class="diy-popup">
        <div class="pointer"></div>
            <div class="popup-title">001号线_01_早送_守押<br/>
              001_苏E12345
              </div>
            <div class="popup-item">
                <div class="popup-lable">线路类型：</div>
                <div class="popup-value">${data.lineType}</div>
              </div>
              <div class="sub-title">装备信息</div>
              <div class="popup-grid">
                ${zbList.join("")}
                </div>
                <div class="sub-title">人员信息</div>
                     <div class="popup-grid">
                      ${userList.join("")}
                </div>
                <div class="sub-title">标的物信息</div>
                 <div class="popup-grid">
                      <div class="popup-item">
                <div class="popup-lable">标的物总数：</div>
                <div class="popup-value">${data.bdwInfo.count}只</div>
              </div>
                </div>
          </div>`;

      fixedRoute.bindPopup(html, {
        className: "carPopup",
        offsetX: 280,
        offsetY: 100,
        // closeButton: false,
      });
    },

    getStartAndEndOfDayFormatted(boole) {
      const now = new Date();
      const startOfDay = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        0,
        0,
        0
      );
      const endOfDay = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        23,
        59,
        59,
        999
      );

      return {
        startOfDay: this.formatDate(startOfDay, boole),
        endOfDay: this.formatDate(endOfDay, boole),
      };
    },

    formatDate(date, boole) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      if (boole) {
        return `${year}${month}${day}${hours}${minutes}${seconds}`;
      } else {
        return `${year}${month}${day}`;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.albuginea {
  cursor: pointer;
  position: absolute;
  top: 103px;

  left: calc(554px + 24px);
  z-index: 100;
  width: 80px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  background: #032b57;
  border-radius: 2px;
  border: 1px solid #0084ff;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
.backBtn {
  top: 145px;
}
.albuginea:hover {
  background: #0084ff;
}
.container-top {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  .next-stand {
    margin-right: 40px;
  }
  & > div {
    width: 200px;
    img {
      height: 38px;
      width: 100%;
      display: block;
      margin-bottom: 10px;
    }
    span {
      display: block;
      font-size: 40px;
      color: #ffffff;
      line-height: 51px;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;

      background: linear-gradient(270deg, #00e5ff 0%, #d8d8d8 100%);
      /* 将背景限制在文字区域内 */
      -webkit-background-clip: text;
      background-clip: text;
      /* 设置文字颜色，会被背景图像遮住 */
      color: transparent;
      font-family: "DIN-Regular-2";
    }
  }
}
.video-list {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px;
  display: flex;
  align-items: center;
  border: 1px solid #415367;
  border-radius: 10px;
  background: rgba(28, 31, 34, 0.6);
}
</style>