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>10.8</span>
      </div>
      <div class="real-time">
        <img src="../assets/images/realTime.png" alt="" />
        <span>5.1</span>
      </div>
    </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";
export default {
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      graphicLayer: null,
      baseUrl: basePathUrl + "lib/geoJson/tileset.json",
      map: null,
      options: {
        scene: {
          center: {
            lat: 31.212805,
            lng: 120.607156,
            alt: 5096.4,
            heading: 357.9,
            pitch: -31.5,
          },
        },
        basemaps: [
          {
            name: "mapbox影像图",
            icon: "img/basemaps/mapboxSatellite.png",
            type: "mapbox",
            username: "sharealex",
            styleId: "cly5i21fn00e901prgq643t4r",
            token:
              "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
            tilesize: 256,
            scaleFactor: false,
            show: true,
          },
        ],
      },
      carUrl: basePathUrl + "lib/car.gltf",
    };
  },
  components: { MarsMap, grids },
  beforeDestroy() {},
  mounted() {},
  methods: {
    mapLoad(map) {
      this.map = map;
      this.graphicLayer = new mars3d.layer.GraphicLayer();
      map.addLayer(this.graphicLayer);
      this.initTilesetLayer();

      // this.createCar();
    },

    /**
     * 加载姑苏区三维图层
     */
    initTilesetLayer() {
      let _this = this;
      // 添加参考三维模型;
      let 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(tiles3dLayer);
      tiles3dLayer.on(mars3d.EventType.load, function (event) {
        _this.createCar();
      });
    },
    /**
     * 生成车辆实时点位
     */
    async createCar() {
      let _this = this;

      let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");

      const fixedRoute = new mars3d.graphic.FixedRoute({
        name: "贴模型表面漫游",
        speed: 60,
        positions: [
          [120.590657, 31.275441, 15.5],
          [120.597244, 31.278797, 16.4],
          [120.595642, 31.280922, 15.1],
          [120.590948, 31.27921, 15.9],
          [120.588008, 31.278101, 13],
          [120.590142, 31.275941, 15.6],
        ],
        camera: {
          type: "gs",
          heading: 0,
          radius: 500,
        },
        model: {
          show: true,
          url: _this.carUrl,
          scale: 0.3,
          heading: -120,
          minimumPixelSize: 55,
          silhouette: true,
          silhouetteColor: "#fff",
          silhouetteSize: 1,
          silhouetteAlpha: 0.19,
          clampToGround: true,
        },
        // billboard: {
        //   image: require("../assets/images/car-active.png"),
        //   width: 210,
        //   height: 100,

        //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
        //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        //   distanceDisplayCondition: true,
        //   clampToGround: true,
        //   visibleDepth: true,
        //   label: {
        //     text: "001号线_01_早送_守押001_苏E",
        //     color: "#fff",
        //     font_size: 13,
        //     pixelOffsetY: -81,
        //     pixelOffsetX: 10,
        //     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        //     distanceDisplayCondition: true,
        //     visibleDepth: false,
        //   },
        // },
        circle: {
          radius: 60,
          materialType: mars3d.MaterialType.CircleWave,
          materialOptions: {
            color: "#FAAC51",
            count: 2,
            speed: 10,
          },
          clampToGround: true,
        },
        polyline: {
          // lastMaterialType: "LineTrail",
          width: 10,
          // closure: true,
          color: "#00F7AC",
          outline: true,
          outlineColor: "#008DF8",
          outlineWidth: 5,
          //   materialOptions: {
          //     color: "#008BFA",
          //     materialType: "LineTrail",
          //     speed: 0,
          //   },
          //   materialType: "LineTrail",
          // },
        },
      });
      this.graphicLayer.addGraphic(fixedRoute);
      //绑定弹窗
      this.bindPopup(fixedRoute, res.data);
      //开始漫游
      fixedRoute.start();
      //打开弹窗
      fixedRoute.openPopup();

      // const point = new mars3d.LngLatPoint(item.lon, item.lat, 0)
      //           car.addDynamicPosition(point, item.time)

      // const graphic = new mars3d.graphic.DivGraphic({
      //   id: "car" + i,
      //   position: [120.590416, 31.275593],
      //   style: {
      //     className: `carIcon`,
      //     html: `<div>
      //         <div class="car-name">001号线_01_早送_守押001_苏E</div>
      //       </div>`,
      //     color: "#fff",
      //     horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
      //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      //     distanceDisplayCondition: true,
      //     clampToGround: true,
      //   },
      //   attr: {
      //     index: i,
      //     id: "car" + i,
      //   },
      // });

      // this.graphicLayer.addGraphic(graphic);
      // // //绑定弹窗
      // this.bindPopup(graphic);

      // this.$nextTick(() => {
      //   graphic.openPopup();
      //   graphic.openHighlight(
      //     {
      //       className: `carIconActive`,
      //     },
      //     false
      //   );
      // });
      // }

      // const circleGraphic = new mars3d.graphic.CircleEntity({
      //   id: `circle1`,
      //   position: new mars3d.LngLatPoint(120.590416, 31.275593),
      //   style: {
      //     radius: 150,
      //     materialType: mars3d.MaterialType.CircleWave,
      //     materialOptions: {
      //       color: "#FAAC51",
      //       count: 3,
      //       speed: 10,
      //     },
      //   },
      // });
      // this.graphicLayer.addGraphic(circleGraphic);

      // this.map.flyToPoint([120.590416, 31.275593], {
      //   radius: 798.9,
      //   heading: 357.9,
      //   pitch: -31.6,
      // });

      //   this.changePosition(0);
      // 定时更新动态位置（setInterval为演示）
      // const interval = 30;
      // this.changePosition(interval);
      // setInterval(() => {
      //   _this.changePosition(interval);
      // }, interval * 1000);
    },

    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="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: 20,
        // closeButton: false,
      });
    },
    // 改变位置
    changePosition(time) {
      let _this = this;
      this.graphicLayer.eachGraphic((graphic) => {
        if (graphic.isPrivate) {
          return;
        }
        graphic.addDynamicPosition(_this.randomPoint(), time); // 按time秒运动至指定位置
      });
    },
    // 取区域内的随机点
    randomPoint() {
      const jd = this.random(120.5265 * 1000, 120.7177 * 1000) / 1000;
      const wd = this.random(31.2783 * 1000, 31.4647 * 1000) / 1000;
      return Cesium.Cartesian3.fromDegrees(jd, wd);
    },
    random(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    chkShadows(val) {
      let _this = this;
      this.map.viewer.shadows = val;
      if (val) {
        setTimeout(function () {
          // 光照沿着相机方向
          _this.map.scene.shadowMap._lightCamera = _this.map.scene.camera;
        }, 1500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container-top {
  position: fixed;
  top: 23px;
  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: 25px;
  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>