优化车辆漫游

src/assets/styles/map.scss

@@ -131,6 +131,10 @@
   .mars3d-popup-tip-container {
     display: none;
   }
+  .mars3d-popup-close-button {
+    top: 6px;
+    right: 6px;
+  }
   .mars3d-popup-content {
     margin: 0;
     // & > div:first-child {

src/views/carInfo.vue

@@ -20,6 +20,7 @@
 <script>
 import MarsMap from "@/components/mars-map";
 import grids from "@/components/grids.vue";
+import { color } from "echarts";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
@@ -93,62 +94,133 @@ export default {
      */
     createCar() {
       let _this = this;
-      for (let i = 0; i < 1; i++) {
+      // for (let i = 0; i < 1; i++) {
-        const graphic = new mars3d.graphic.DivGraphic({
+      const fixedRoute = new mars3d.graphic.FixedRoute({
-          id: "car" + i,
+        name: "贴模型表面漫游",
-          position: [120.590416, 31.275593],
+        speed: 60,
-          style: {
+        positions: [
-            className: `carIcon`,
+          [120.590416, 31.275593, 13.3],
-            html: `<div>
+          [120.608262, 31.285448, 21.7],
-                <div class="car-name">001号线_01_早送_守押001_苏E</div>
+          [120.604422, 31.30131, 30.9],
-              </div>`,
+          [120.594454, 31.301157, 13.1],
-            color: "#fff",
+          [120.587841, 31.300478, 13.1],
+          [120.589466, 31.293781, 9.5],
+          [120.586515, 31.292848, 16.2],
+        ],
+        camera: {
+          type: "gs",
+          heading: 0,
+          radius: 500,
+        },
+        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,
           },
-          attr: {
-            index: i,
-            id: "car" + i,
-          },
-        });
-
-        this.graphicLayer.addGraphic(graphic);
-        // //绑定弹窗
-        this.bindPopup(graphic);
-
-        this.$nextTick(() => {
-          graphic.openPopup();
-          graphic.openHighlight(
-            {
-              className: `carIconActive`,
         },
-            false
+        circle: {
-          );
+          radius: 60,
-        });
-      }
-
-      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: 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(circleGraphic);
+      this.graphicLayer.addGraphic(fixedRoute);
+      //绑定弹窗
+      this.bindPopup(fixedRoute);
+      //开始漫游
+      fixedRoute.start();
+      //打开弹窗
+      fixedRoute.openPopup();
+      // 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.map.flyToPoint([120.590416, 31.275593], {
+      // this.graphicLayer.addGraphic(graphic);
-        radius: 798.9,
+      // // //绑定弹窗
-        heading: 357.9,
+      // this.bindPopup(graphic);
-        pitch: -31.6,
+
-      });
+      // 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为演示）
@@ -210,9 +282,9 @@ export default {
           </div>`,
         {
           className: "carPopup",
-          offsetX: 250,
+          offsetX: 280,
-          offsetY: -50,
+          offsetY: 20,
-          closeButton: false,
+          // closeButton: false,
         }
       );
     },