实时车辆点位

public/index.html

@@ -23,7 +23,10 @@
     <script src="./lib/mars3d/mars3d.js" type="text/javascript"></script>
 
     <!-- 插件 -->
-    <!-- <script src="./lib/mars3d/dom-to-image.js" type="text/javascript"></script> -->
+    <script
+      src="./lib/mars3d/plugins/dom-to-image.js"
+      type="text/javascript"
+    ></script>
     <script
       src="./lib/mars3d/plugins/echarts/echarts.min.js"
       type="text/javascript"

src/App.vue

@@ -24,6 +24,7 @@ export default {
     };
   },
   methods: {},
+  created() {},
 };
 </script>
 <style lang="scss" scoped>

src/assets/styles/map.scss

@@ -84,3 +84,24 @@
     margin: 0;
   }
 }
+
+.car-point {
+  cursor: pointer;
+  width: 220px;
+  height: 100px;
+  background: url("../images/car.png");
+  background-size: 100% 100%;
+
+  div {
+    position: relative;
+    top: 2px;
+    width: 100%;
+    padding-left: 30px;
+    padding-right: 10px;
+    font-size: 14px;
+    color: #ffffff;
+    white-space: nowrap; /* 让文字不换行 */
+    overflow: hidden; /* 隐藏溢出的部分 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+}

src/main.js

@@ -50,8 +50,8 @@ import VueMeta from "vue-meta";
 // 字典数据组件
 import DictData from "@/components/DictData";
 
-import "leaflet/dist/leaflet.css";
+// import "leaflet/dist/leaflet.css";
-import * as L from "leaflet";
+// import * as L from "leaflet";
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
 Vue.prototype.getConfigKey = getConfigKey;

src/permission.js

@@ -13,6 +13,7 @@ const whiteList = [
   "/register",
   "/AboutView",
   "/HomeView",
+  "/car",
   "/nationwide",
 ];
 

src/router/index.js

@@ -86,11 +86,17 @@ export const constantRoutes = [
   //   name: "Index",
   //   meta: { title: "3d", icon: "dashboard", affix: true },
   // },
+  // {
+  //   path: "/cityDimension",
+  //   component: () => import("@/views/cityDimension"),
+  //   name: "cityDimension",
+  //   meta: { title: "姑苏二维", icon: "dashboard", affix: true },
+  // },
   {
-    path: "/cityDimension",
+    path: "/car",
-    component: () => import("@/views/cityDimension"),
+    component: () => import("@/views/car"),
-    name: "cityDimension",
+    name: "car",
-    meta: { title: "姑苏二维", icon: "dashboard", affix: true },
+    meta: { title: "车辆 ", icon: "dashboard", affix: true },
   },
   {
     path: "/nationwide",

src/views/car.vue

@@ -0,0 +1,303 @@
+<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>
+</template>
+
+<script>
+import MarsMap from "@/components/mars-map";
+export default {
+  data() {
+    const basePathUrl = window.basePathUrl || "";
+    return {
+      multipleList: ["营运线路", "维护线路", "临时任务"],
+      selectedItems: [],
+      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,
+          },
+        ],
+      },
+      show: false,
+    };
+  },
+  components: { MarsMap },
+  beforeDestroy() {
+    // 在组件销毁之前移除事件监听，防止内存泄漏
+    document.removeEventListener("click", this.handleClickOutside);
+  },
+  mounted() {
+    // 在mounted钩子中添加全局点击事件监听
+    document.addEventListener("click", this.handleClickOutside);
+  },
+  methods: {
+    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();
+      if (process.env.NODE_ENV === "production") this.initTilesetLayer();
+    },
+    /**
+     * 生成车辆实时点位
+     */
+    createCar() {
+      let _this = this;
+      for (let i = 0; i < 10; i++) {
+        const graphic = new mars3d.graphic.DivGraphic({
+          style: {
+            html: `<div class="car-point">
+                <div>001号线_01_早送_守押001_苏E</div>
+              </div>`,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            // scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1),
+
+            scaleByDistance: true,
+          },
+          attr: { index: i, remark: "Billboard示例" },
+        });
+        this.graphicLayer.addGraphic(graphic);
+      }
+
+      this.changePosition(0);
+
+      // 定时更新动态位置（setInterval为演示）
+      const interval = 30;
+      this.changePosition(interval);
+      setInterval(() => {
+        _this.changePosition(interval);
+      }, interval * 1000);
+    },
+
+    // 改变位置
+    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: this.baseUrl,
+        maximumScreenSpaceError: 1,
+        style: {
+          color: {
+            conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
+          },
+        },
+      });
+      this.map.addLayer(tiles3dLayer);
+
+      if (process.env.NODE_ENV === "production") this.chkShadows(true);
+
+      this.createCar();
+    },
+    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: 50;
+
+  .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;
+    }
+  }
+}
+.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>