From 5dc2118eddbda91c965a14dd57255229cab60da1 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 19 四月 2024 11:58:40 +0800
Subject: [PATCH] Merge branch 'dev-threejs'
---
src/views/screen/components/screen-map-three/experience/world/map.js | 39 ++++++++++++++++++++++++++++++++++++---
1 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/components/screen-map-three/experience/world/map.js b/src/views/screen/components/screen-map-three/experience/world/map.js
index 2d2a299..fd648d6 100644
--- a/src/views/screen/components/screen-map-three/experience/world/map.js
+++ b/src/views/screen/components/screen-map-three/experience/world/map.js
@@ -1,6 +1,7 @@
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';
@@ -17,9 +18,11 @@
export default class Map {
constructor(experience) {
this.experience = experience;
- this.scene = this.experience.scene;
- this.camera = this.experience.camera;
+ this.scene = experience.scene;
+ this.camera = experience.camera;
+
this.provinceMeshList = [];
+ this.labelList = [];
this.textureLoader = new THREE.TextureLoader();
this.setTexture();
this.operationData(mapData);
@@ -66,6 +69,7 @@
const province = new THREE.Object3D();
// 鍦板潃
province.properties = feature.properties.name;
+ province.isHover = false;
// 澶氫釜鎯呭喌
// console.log(feature.geometry.type);
if (feature.geometry.type === "MultiPolygon") {
@@ -90,7 +94,9 @@
this.provinceMeshList.push(mesh);
});
}
- province.isHover = false;
+ const label = this.drawLabelText(feature);
+ this.labelList.push({ name: feature.properties.name, label });
+ province.add(label);
this.map.add(province);
});
this.map.position.set(1, 1, -1.5);
@@ -149,6 +155,22 @@
]);
}
+ drawLabelText(province) {
+ const [x, y] = projection(province.properties.center);
+ const div = 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';
+ const label = new CSS2DObject(div);
+ div.style.pointerEvents = 'none';
+ label.position.set(x, y, MAP_DEPTH + 0.05);
+ return label;
+ }
+
setMouseEvent() {
this.mouseEvent = this.handleEvent.bind(this);
@@ -177,6 +199,7 @@
if (intersects.length) {
let temp = intersects[0].object;
this.animation(temp.parent);
+ this.showLabel(temp.parent);
} else {
this.animation();
}
@@ -231,6 +254,16 @@
})
}
+ showLabel(province) {
+ this.labelList.forEach((item) => {
+ // if (item.name === province.properties) {
+ // item.label.element.style.visibility = 'visible';
+ // } else {
+ // item.label.element.style.visibility = 'hidden';
+ // }
+ })
+ }
+
enterAnimation() {
gsap.to(this.map.scale, {
z: 10,
--
Gitblit v1.8.0