修复BUG

src/views/AppMarketBoard.vue

@@ -0,0 +1,24 @@
+<script>
+import AppMarketBoardFilter from "@/views/AppMarketBoardFilter.vue";
+import AppThreeMap from "@/views/AppThreeMap.vue";
+
+export default {
+  name: "AppMarketBoard",
+  label: "市场看板",
+  components: {AppMarketBoardFilter, AppThreeMap}
+}
+</script>
+
+<template>
+  <section class="AppMarketBoard">
+    <app-market-board-filter/>
+    <app-three-map/>
+  </section>
+</template>
+
+<style scoped>
+.AppMarketBoard {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/AppThreeMap.vue

@@ -68,15 +68,17 @@ export default {
         animation() {
           requestAnimationFrame(this.animation.bind(this));
           this.loop = (this.loop * 100 + 2) % 100 * 0.01
-          this.markers.children.forEach(e => {
-            if (e.data.bakeStockAmt <= 0) {
-              e.scale = {
-                x: Math.asin(this.loop) + 1,
-                y: Math.asin(this.loop) + 1,
-                z: Math.asin(this.loop) + 1
-              };
-            }
-          })
+          if (this.markers) {
+            this.markers.children.forEach(e => {
+              if (e.data.bakeStockAmt <= 0) {
+                e.scale = {
+                  x: Math.asin(this.loop) + 1,
+                  y: Math.asin(this.loop) + 1,
+                  z: Math.asin(this.loop) + 1
+                };
+              }
+            })
+          }
           TWEEN.update();
           this.controls.update();
           this.renderer.render(this.scene, this.camera);
@@ -197,11 +199,11 @@ export default {
         }
 
         addMarkers() {
+          this.markers.clear()
           root.layers.map(layer => {
             const marker = this.transLayer(layer)
             this.markers.add(marker)
           })
-          this.mapGroup.add(this.markers)
         }
 
         lnglatToVector3(lnglat = []) {
@@ -218,6 +220,7 @@ export default {
          * */
         setScene() {
           this.scene = new THREE.Scene();
+          this.mapGroup.add(this.markers)
           this.mapGroup.scale.set(scale, scale, scale)
           this.mapGroup.position.set(0, 0, 0)
           this.scene.add(this.mapGroup);
@@ -315,13 +318,13 @@ export default {
 
         bindMouseEvent() {
           const raycaster = new THREE.Raycaster();
-
+          const targets = this.markers?.children || []
           const onPointerMove = (event) => {
             const {offsetWidth: width, offsetHeight: height} = rootEl, {left, top} = rootEl.getBoundingClientRect();
             this.mouse.x = ((event.clientX - left) / width) * 2 - 1; //标准设备横坐标
             this.mouse.y = -((event.clientY - top) / height) * 2 + 1; //标准设备纵坐标
             raycaster.setFromCamera(this.mouse, this.camera);
-            const intersects = raycaster.intersectObjects(this.markers.children)
+            const intersects = raycaster.intersectObjects(targets)
             intersects.forEach(e => {
               if (e.object?.data) {
                 this.showHoverPanel(e.object)
@@ -339,7 +342,7 @@ export default {
             // const ray = worldVector.sub(this.camera.position).normalize();
             // 创建一个射线投射器
             raycaster.setFromCamera(this.mouse, this.camera);
-            const intersects = raycaster.intersectObjects(this.markers.children)
+            const intersects = raycaster.intersectObjects(targets)
             intersects.forEach(e => {
               if (e.object?.data) {
                 const marker = e.object?.data
@@ -412,8 +415,8 @@ export default {
 </template>
 <style>
 .AppThreeMap {
-  width: 900px;
-  height: 500px;
+  width: 100%;
+  height: 100%;
   position: relative;
 }
 </style>