Merge remote-tracking branch 'origin/master'

xiangpei

2024-07-22 c8315eb3969bd51bdd712d1b4d4d1cfc2bef243c

 src/views/screen/components/screen-map-three/experience/world/map.js

@@ -1,17 +1,20 @@
import * as THREE from 'three';
import * as d3 from 'd3';
import mapData from '@/assets/map/zigong2.json';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
import * as THREE from "three";
import * as d3 from "d3";
import mapData from "@/assets/map/zigong2.json";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer";

import textureMapImage from '@/assets/map/texture/gz-map.jpg';
import textureMapFxImage from '@/assets/map/texture/gz-map-fx.jpg';
import textureMapImage from "@/assets/map/texture/gz-map.jpg";
import textureMapFxImage from "@/assets/map/texture/gz-map-fx.jpg";

import gsap from 'gsap';
import gsap from "gsap";

// 地图深度
const MAP_DEPTH = 0.2;

const projection = d3.geoMercator().center([104.779307, 29.33924]).translate([0, 0, 0]);
const projection = d3
  .geoMercator()
  .center([104.779307, 29.33924])
  .translate([0, 0, 0]);

const raycaster = new THREE.Raycaster();

@@ -101,7 +104,11 @@
        });
        this.map.position.set(1, 1, -1.5);
        this.map.scale.set(10, 10, 1);
        this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20));
    this.map.rotation.set(
      THREE.MathUtils.degToRad(-90),
      0,
      THREE.MathUtils.degToRad(20)
    );
        this.scene.add(this.map);

        this.setMouseEvent();
@@ -149,28 +156,32 @@
            bevelSegments: 1,
            bevelThickness: 0.1,
        });
        return new THREE.Mesh(geometry, [
            this.topFaceMaterial,
            this.sideMaterial,
        ]);
    return new THREE.Mesh(geometry, [this.topFaceMaterial, this.sideMaterial]);
    }

    drawLabelText(province) {
        const [x, y] = projection(province.properties.center);
        const div = document.createElement('div');
    const div = document.createElement("div");
    // const icon = document.createElement("div");
        div.innerHTML = province.properties.name;
        div.style.padding = '4px 10px';
        div.style.color = '#fff';
        div.style.fontSize = '16px';
        div.style.position = 'absolute';
        div.style.backgroundColor = 'rgba(25,25,25,0.5)';
        div.style.borderRadius = '5px';
    div.style.padding = "4px 10px";
    div.style.color = "#fff";
    div.style.fontSize = "18px";
    div.style.position = "absolute";
    // div.style.display = "flex";
    // div.style.justifyContent = 'center'
    // div.style.backgroundColor = 'rgba(25,25,25,0.5)';
    // div.style.border = '5px';
    // icon.style.borderRadius = '100%'
    // icon.style.background = '#aaffa5'
    // icon.style.width = '10px'
    // icon.style.height = '10px'
    // div.appendChild(icon);
        const label = new CSS2DObject(div);
        div.style.pointerEvents = 'none';
    div.style.pointerEvents = "none";
        label.position.set(x, y, MAP_DEPTH + 0.05);
        return label;
    }


    setMouseEvent() {
        this.mouseEvent = this.handleEvent.bind(this);
@@ -186,9 +197,20 @@
        // return;
        if (this.map) {
            let mouse = new THREE.Vector2();
            let getBoundingClientRect = this.experience.canvas.getBoundingClientRect();
            let x = ((e.clientX - getBoundingClientRect.left) / getBoundingClientRect.width) * 2 - 1;
            let y = -((e.clientY - getBoundingClientRect.top) / getBoundingClientRect.height) * 2 + 1;
      let getBoundingClientRect =
        this.experience.canvas.getBoundingClientRect();
      let x =
        ((e.clientX - getBoundingClientRect.left) /
          getBoundingClientRect.width) *
          2 -
        1;
      let y =
        -(
          (e.clientY - getBoundingClientRect.top) /
          getBoundingClientRect.height
        ) *
          2 +
        1;
            mouse.x = x;
            mouse.y = y;

@@ -225,17 +247,16 @@
                    if (item.properties === province.properties) {
                        gsap.to(province.position, {
                            z: 0.12,
                            duration: 0.6
                        })
              duration: 0.6,
            });
                    } else {
                        this.resetAnimation(item);
                    }
                })
        });
            }
        } else {
            this.resetAllAnimation();
        }

    }

    resetAnimation(province) {
@@ -244,14 +265,14 @@
            duration: 0.6,
            onComplete: () => {
                province.isHover = false;
            }
        })
      },
    });
    }

    resetAllAnimation() {
        this.map.children.forEach((item) => {
            this.resetAnimation(item);
        })
    });
    }

    showLabel(province) {
@@ -261,15 +282,15 @@
            // } else {
            //     item.label.element.style.visibility = 'hidden';
            // }
        })
    });
    }

    enterAnimation() {
        gsap.to(this.map.scale, {
            z: 10,
            duration: 0.6,
            ease: 'power1.out'
        })
      ease: "power1.out",
    });
    }

    destroy() {