模型,车辆优化

src/views/car.vue

@@ -51,6 +51,7 @@ export default {
       selectedItems: [],
       graphicLayer: null,
       baseUrl: basePathUrl + "lib/geoJson/tileset.json",
+      carUrl: basePathUrl + "lib/car.gltf",
       map: null,
       options: {
         scene: {
@@ -101,15 +102,16 @@ export default {
      * 创建车辆图标
      */
     createCar(list) {
+      let _this = this;
       list.map((item, index) => {
-        const graphic = new mars3d.graphic.ModelEntity({
+        const graphic = new mars3d.graphic.ModelPrimitive({
           id: `car${item.carId}`,
           position: [parseFloat(item.lng), parseFloat(item.lat)],
           style: {
             heading: parseInt(item.drct),
-            url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
-            scale: 0.5,
-            minimumPixelSize: 35,
+            url: _this.carUrl,
+            scale: 1,
+            minimumPixelSize: 40,
             silhouette: true,
             silhouetteColor: "#025CC1",
             silhouetteSize: 2,
@@ -141,6 +143,10 @@ export default {
           attr: { index: index, remark: "Model示例" },
         });
 
+        graphic.on(mars3d.EventType.click, function (e) {
+          _this.$router.push({ path: "/carInfo" });
+        });
+
         this.graphicLayer.addGraphic(graphic);
       });
     },
@@ -251,7 +257,12 @@ export default {
       const tiles3dLayer = new mars3d.layer.TilesetLayer({
         name: "姑苏区建筑物",
         url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
-        maximumScreenSpaceError: 1,
+        maximumScreenSpaceError: 16,
+        maximumMemoryUsage: 1024 / 2,
+        dynamicScreenSpaceError: false,
+        skipLevelOfDetail: true,
+        preferLeaves: true,
+        flyTo: false,
         style: {
           color: {
             conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],

src/views/carInfo.vue

@@ -53,6 +53,7 @@ export default {
           },
         ],
       },
+      carUrl: basePathUrl + "lib/car.gltf",
     };
   },
   components: { MarsMap, grids },
@@ -77,7 +78,12 @@ export default {
       let tiles3dLayer = new mars3d.layer.TilesetLayer({
         name: "姑苏区建筑物",
         url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
-        maximumScreenSpaceError: 1,
+        maximumScreenSpaceError: 16,
+        maximumMemoryUsage: 1024 / 2,
+        dynamicScreenSpaceError: false,
+        skipLevelOfDetail: true,
+        preferLeaves: true,
+        flyTo: false,
         style: {
           color: {
             conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
@@ -115,13 +121,15 @@ export default {
         },
         model: {
           show: true,
-          url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
+          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"),

src/views/nationwide.vue

@@ -24,11 +24,11 @@ export default {
       options: {
         scene: {
           center: {
-            lat: -13.043317,
-            lng: 110.564694,
-            alt: 9535005.7,
-            heading: 354.3,
-            pitch: -61.6,
+            lat: 2.849636,
+            lng: 109.828071,
+            alt: 12509129.9,
+            heading: 353.3,
+            pitch: -73.4,
           },
         },
         control: {
@@ -62,10 +62,7 @@ export default {
         showSkyBox: false,
         showSkyAtmosphere: false,
         sceneMode: 1,
-        globe: {
-          // showGroundAtmosphere: false,
-          // baseColor: "rgba(0,0,0,0)",
-        },
+
         cameraController: {
           enableZoom: false,
           enableTranslate: false,
@@ -93,7 +90,18 @@ export default {
             positions: item.positions,
             style: {
               fill: true,
-              color: "#4881a7",
+              lastMaterialType: "Image",
+              materialOptions: {
+                materialType: "Image",
+                image: require("../assets/images/姑苏区.png"),
+                opacity: 1,
+                repeat_x: 1,
+                repeat_y: 1,
+                transparent: false,
+              },
+
+              materialType: "Image",
+
               opacity: 1,
               outline: true,
               outlineWidth: 1.5,
@@ -101,21 +109,21 @@ export default {
               setHeight: 900009,
             },
           });
-          const wall = new mars3d.graphic.WallPrimitive({
-            positions: item.positions,
-            style: {
-              setHeight: -20000,
-              diffHeight: 900000, // 墙高
-              width: 10,
-              materialType: mars3d.MaterialType.Image2,
-              materialOptions: {
-                image: require("../assets/images/fence-top.png"),
-                color: "#0071F8",
-              },
-            },
-          });
+          // const wall = new mars3d.graphic.WallPrimitive({
+          //   positions: item.positions,
+          //   style: {
+          //     setHeight: -20000,
+          //     diffHeight: 900000, // 墙高
+          //     width: 10,
+          //     materialType: mars3d.MaterialType.Image2,
+          //     materialOptions: {
+          //       image: require("../assets/images/fence-top.png"),
+          //       color: "#0071F8",
+          //     },
+          //   },
+          // });
           this.mapLayer.china.addGraphic(polygonEntity);
-          this.mapLayer.china.addGraphic(wall);
+          // this.mapLayer.china.addGraphic(wall);
         });
 
         this.createEchartsLayer();