yunkunMap/src/views/car.vue

<template>
  <div class="map-container">
    <div class="input-search" ref="targetElement">
      <div class="search-box">
        <input type="text" placeholder="请输入路线或者临时任务名称" />
        <div class="search-btn" @click="show = !show">搜索</div>
      </div>
      <el-collapse-transition>
        <div v-show="show" class="search-list">
          <div class="list-item" v-for="(item, index) in 5" :key="index">
            002号线_01_维护_守押085_苏E
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
    <div class="multiple">
      <div
        @click="toggleSelection(item)"
        :class="{ checkbox: true, checked: isSelected(item) }"
        v-for="(item, index) in multipleList"
        :key="index"
      >
        <img
          :src="
            isSelected(item)
              ? require(`../assets/images/${item}-active.png`)
              : require(`../assets/images/${item}.png`)
          "
          alt=""
          class="btn-icon"
        />
        {{ item }}
      </div>
    </div>
    <!-- <div class="video-list" v-show="showVideo">
      <grids></grids>
    </div> -->
  </div>
</template>

<script>
import carJSON from "@/api/carrRealtimeLocation.json";
import MarsMap from "@/components/mars-map";
// import grids from "@/components/grids.vue";
import { lgoin, getCarList } from "@/api/yunkun/yunkun.js";
export default {
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      multipleList: ["营运线路", "维护线路", "临时任务"],
      selectedItems: [],
      graphicLayer: null,
      baseUrl: basePathUrl + "lib/geoJson/tileset.json",
      carUrl: basePathUrl + "lib/car.gltf",
      map: null,
      options: {
        scene: {
          center: {
            lat: 31.212805,
            lng: 120.607156,
            alt: 5096.4,
            heading: 357.9,
            pitch: -31.5,
          },
        },

        control: {
          contextmenu: { preventDefault: false, hasDefault: false },
        },
        basemaps: [
          {
            name: "mapbox影像图",
            icon: "img/basemaps/mapboxSatellite.png",
            type: "mapbox",
            username: "sharealex",
            styleId: "cly5i21fn00e901prgq643t4r",
            token:
              "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
            tilesize: 256,
            scaleFactor: false,
            show: true,
          },
        ],
      },
      show: false,
      showVideo: true,
    };
  },
  components: { MarsMap },
  beforeDestroy() {
    clearInterval(this.timer);
    // 在组件销毁之前移除事件监听，防止内存泄漏
    document.removeEventListener("click", this.handleClickOutside);
  },
  mounted() {
    // 在mounted钩子中添加全局点击事件监听
    document.addEventListener("click", this.handleClickOutside);

    this.getCarList();
  },
  methods: {
    async getCarList() {
      let res = await getCarList();
      // console.log(res, "ss");
    },

    async getlogin() {
      const data = {
        userId: "99999",
        password: "6d0fd76ab81325588d8065ec1036fdd3",
        loginType: "user",
      };
      let res = await lgoin();
      console.log(res, "登录数据");
    },

    // 获取车辆信息
    getCarLocation() {
      this.createCar(carJSON.list);
    },

    /**
     * 创建车辆图标
     */
    createCar(list) {
      let _this = this;
      list.map((item, index) => {
        const graphic = new mars3d.graphic.ModelPrimitive({
          id: `car${item.carId}`,
          position: [parseFloat(item.lng), parseFloat(item.lat)],
          style: {
            heading: parseInt(item.drct),
            //url: _this.carUrl,
            url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
            scale: 1,
            minimumPixelSize: 40,
            silhouette: true,
            silhouetteColor: "#025CC1",
            silhouetteSize: 2,
            // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
            highlight: {
              type: mars3d.EventType.click,
              silhouette: true,
              silhouetteColor: "#FAAC51",
              silhouetteSize: 2,
              label: {
                outlineColor: "#FAAC51",
              },
            },
            label: {
              // 不需要文字时，去掉label配置即可
              text: item.carName,
              font_size: 14,
              color: "#ffffff",
              outline: true,
              outlineColor: "#000000",
              pixelOffsetY: -30,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 50000,
              distanceDisplayCondition_near: 0,
            },
            clampToGround: true,
          },
          // forwardExtrapolationType: Cesium.ExtrapolationType.NONE,
          attr: { index: index, remark: "Model示例" },
        });

        graphic.on(mars3d.EventType.click, function (e) {
          _this.$router.push({ path: "/carInfo" });
        });

        this.graphicLayer.addGraphic(graphic);
      });
    },

    /**
     * 生成车辆实时点位
     */
    // createCar(list) {
    //   let _this = this;
    //   console.log(list);
    //   for (let i = 0; i < list.length; i++) {
    //     let item = list[i];

    //     const graphic = new mars3d.graphic.DivGraphic({
    //       id: "car" + i,
    //       position: [parseFloat(item.lng), parseFloat(item.lat)],
    //       style: {
    //         className: `carIcon`,
    //         html: `<div>
    //             <div class="car-name">${item.carName}</div>
    //           </div>`,
    //         color: "#fff",
    //         horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
    //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    //         distanceDisplayCondition: false,
    //         clampToGround: true,
    //         highlight: {
    //           type: "click",
    //           className: `carIconActive`,
    //         },
    //       },
    //       attr: {
    //         index: i,
    //         id: "car" + i,
    //       },
    //     });
    //     graphic.on(mars3d.EventType.highlightOpen, function (event) {
    //       _this.$router.push("/carInfo");
    //     });

    //     this.graphicLayer.addGraphic(graphic);
    //   }

    //   // this.changePosition(0);

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

    handleClickOutside(event) {
      // 判断点击的元素是否在目标元素外部
      if (this.show && !this.$refs.targetElement.contains(event.target)) {
        this.show = false;
      }
    },
    toggleSelection(item) {
      // 切换选中状态
      if (this.isSelected(item)) {
        this.selectedItems = this.selectedItems.filter(
          (selectedItem) => selectedItem !== item
        );
      } else {
        this.selectedItems.push(item);
      }
    },
    isSelected(item) {
      // 检查某个项是否被选中
      return this.selectedItems.includes(item);
    },

    mapLoad(map) {
      this.map = map;
      this.graphicLayer = new mars3d.layer.GraphicLayer();
      map.addLayer(this.graphicLayer);
      this.initTilesetLayer();
    },

    // 改变位置
    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);
    },

    /**
     * 加载姑苏区三维图层
     */
    initTilesetLayer() {
      let _this = this;
      // 添加参考三维模型;
      const 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);

      if (process.env.NODE_ENV === "production") this.chkShadows(true);

      tiles3dLayer.on(mars3d.EventType.load, function (event) {
        _this.getCarLocation();
      });
    },
    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>
.input-search {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;

  .search-box {
    display: flex;
    align-items: center;
    height: 32px;
  }
  .search-btn {
    cursor: pointer;
    line-height: 32px;
    background: #0084ff;
    color: #ffffff;
    font-size: 14px;
    padding: 0 10px;
    height: 100%;
    border-radius: 0 3px 3px 0;
  }

  input {
    font-size: 14px;
    width: 280px;
    height: 100%;
    border: 1px solid #0084ff;
    border-right: 0;
    background: #032b57;
    padding-left: 6px;
    color: #ffffff;
  }
  input::placeholder {
    color: #7c91a8;
  }
  input:focus-visible {
    outline: none;
  }
  .search-list {
    width: 280px;
    background: #032b57;
    color: #fff;
    border: 1px solid #0084ff;
    border-top: 0;
    & > div {
      font-size: 14px;
      padding: 10px;
    }
    & > div:hover {
      background: #0084ff;
    }
  }
}
.video-list {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px;
  display: flex;
  align-items: center;
  border: 1px solid #415367;
  border-radius: 10px;
  background: rgba(28, 31, 34, 0.6);
}
.multiple {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 880px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url("../assets/images/multipleList.png");
  background-size: 100% 100%;
  padding: 0 230px;
  .checkbox {
    cursor: pointer;
    width: 112px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    background: linear-gradient(180deg, #072853 0%, #0079ff 100%);
    // border-radius: 16px;
    border: 1px solid #0084ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .checked {
    background: #fd873f;
    color: #612500;
    border: 0;
    font-weight: bold;
    border: 1px solid #f7c75d;
  }
  .btn-icon {
    width: 15px;
    height: 16px;
    margin-right: 10px;
  }
}
</style>