fix: 地图颜色未加载全的问题2

app/src/components/MapChart3D/index.vue

@@ -8,7 +8,7 @@ import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer
 import { Interaction } from 'three.interaction/src/index.js';
 import * as d3 from 'd3-geo'
 import gsap from 'gsap'
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, nextTick } from 'vue';
 
 const BASE_URL = "/src/assets"
 
@@ -50,22 +50,19 @@ export default {
     let prevMesh = null;
     let selectName = null;
     let selectPrevColor = null;
-    var uniforms2 = {
-      u_time: { value: 0.0 }
-    };
     var map = new THREE.Group();
+    let needReloadColor = []
     const COLOR_MAP = {
-      "红色": "#ff4540",
-      "橙色": "#ff8934",
-      "黄色": "#ffff55",
-      "绿色": "#69ff90",
-      "蓝色": "#23a3ff"
+      "红色": 0xff4540,
+      "橙色": 0xff8934,
+      "黄色": 0xffff55,
+      "绿色": 0x69ff90,
+      "蓝色": 0x23a3ff
     }
 
 
     let textureLoader = new THREE.TextureLoader(); //纹理贴图加载器
     const cacheMap = new Map()
-    // const isInnerClick = ref(true)
     const mapData = ref(getHeatMapData(props.mapHeatData))
     function getHeatMapData(val) {
       return val.reduce((config, current) => {
@@ -83,13 +80,12 @@ export default {
 
     watch(() => props.mapHeatData, (val) => {
       mapData.value = getHeatMapData(val)
-      Object.keys( mapData.value ).forEach(key => {
-        const area = cacheMap.get(key);
-        if (area) {
-          area.mesh.material[0].color.set(getAreaColor(key))
-        }
+      nextTick(() => {
+        Object.keys( mapData.value ).forEach(key => {
+          const area = cacheMap.get(key);
+          area && area?.mesh.material[0].color.set(getAreaColor(key))
+        })
       })
-
     }, {
       deep: true
     })
@@ -214,6 +210,13 @@ export default {
       loader.load(`${BASE_URL}/json/cq.json`, function (data) {
         let jsonData = JSON.parse(data);
         initMap(jsonData);
+        
+        setTimeout(() => {
+          needReloadColor.forEach(item => {
+          item?.mesh.material[0].color.set(getAreaColor(item.name))
+          })
+          needReloadColor = []
+        })
       })
     }
 
@@ -269,7 +272,6 @@ export default {
       prevMesh && prevMesh.material[0].color.set(`#${selectPrevColor}`)
       selectMesh && selectMesh.material[0].color.set('#ffffff')
     }
-    
   /**
 	 * 根据json生成地图
 	 * @param chinaJson
@@ -304,7 +306,6 @@ export default {
 		} );
 			// 新建一个省份容器：用来存放省份对应的模型和轮廓线
 			const meshArrs = new THREE.Object3D()
-			const meshs = []
       cacheMap.clear()
 			// d3-geo转化坐标
 		const projection = d3.geoMercator().center([107.70084090820312, 29.942008602258]).scale(1740).translate([0, 0]);
@@ -340,7 +341,6 @@ export default {
 						map: textureMap,
 						displacementMap: texturedispMap,
 						displacementScale: .5,
-						color: getAreaColor(properties.name),
 						combine: THREE.MultiplyOperation,
 						transparent: true,
 						opacity: .9,
@@ -351,7 +351,6 @@ export default {
 					mesh.rotateX(-Math.PI/2)
 					mesh.position.set(0,1.5,-3)
 					meshArrs.add(mesh)
-					meshs.push(mesh)
 					mesh.on('click', () => {
             clickArea(mesh, name)
             if (properties.name !== activeArea.value) {
@@ -374,12 +373,18 @@ export default {
 					mesh.on('mouseout', () => {
 						info.visible = false
 					})
+
+          if (material.color.getHexString() === 'ffffff') {
+            needReloadColor.push({
+              mesh,
+              name: properties.name
+            })
+          }
           cacheMap.set(properties.name, {
             mesh,
             name,
             info
           })
-
 					//Line2
 					linGeometry.setPositions( positions );
 					linGeometry.setColors( colors );