From cc6994a5858cd662f5904005bbbd9d34b712f76c Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 19 四月 2024 11:56:25 +0800
Subject: [PATCH] feat:添加地图label
---
src/views/screen/components/screen-map-three/experience/index.js | 4 ++
src/views/screen/components/screen-map-three/experience/cssRenderer.js | 31 +++++++++++++++
src/views/screen/components/screen-map-three/experience/world/map.js | 39 ++++++++++++++++++-
src/assets/map/zigong2.json | 30 ++++++++++++++
4 files changed, 100 insertions(+), 4 deletions(-)
diff --git a/src/assets/map/zigong2.json b/src/assets/map/zigong2.json
index ee0d331..f27b2b3 100644
--- a/src/assets/map/zigong2.json
+++ b/src/assets/map/zigong2.json
@@ -20,6 +20,10 @@
"pixels",
"pixels"
],
+ "center": [
+ 104.681471408,
+ 29.41058885
+ ],
"icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
"Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
},
@@ -568,7 +572,11 @@
"styleUrl": "#msn_ylw-pushpin0",
"fill-opacity": "0.5",
"fill": "#000000",
- "stroke-opacity": "1"
+ "stroke-opacity": "1",
+ "center": [
+ 104.805193,
+ 29.348033
+ ]
},
"geometry": {
"coordinates": [
@@ -936,6 +944,10 @@
"icon-offset-units": [
"pixels",
"pixels"
+ ],
+ "center": [
+ 104.968050,
+ 29.285946
],
"icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
"Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
@@ -2027,6 +2039,10 @@
"pixels",
"pixels"
],
+ "center": [
+ 104.81804,
+ 29.440594
+ ],
"icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
"Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
},
@@ -2913,6 +2929,10 @@
"pixels",
"pixels"
],
+ "center": [
+ 104.599106,
+ 29.341427
+ ],
"icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
"Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
},
@@ -3734,6 +3754,10 @@
"icon-offset-units": [
"pixels",
"pixels"
+ ],
+ "center": [
+ 104.3334,
+ 29.2938
],
"icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
"Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
@@ -5281,6 +5305,10 @@
"pixels",
"pixels"
],
+ "center": [
+ 105.104762,
+ 29.518852
+ ],
"icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
"Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
},
diff --git a/src/views/screen/components/screen-map-three/experience/cssRenderer.js b/src/views/screen/components/screen-map-three/experience/cssRenderer.js
new file mode 100644
index 0000000..dcae37c
--- /dev/null
+++ b/src/views/screen/components/screen-map-three/experience/cssRenderer.js
@@ -0,0 +1,31 @@
+import * as THREE from 'three';
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
+export default class CSSRenderer {
+ constructor(experience) {
+ this.experience = experience;
+ this.container = experience.container;
+ this.canvas = experience.canvas;
+ this.sizes = experience.sizes;
+ this.scene = experience.scene;
+ this.camera = experience.camera;
+
+ this.setInstance();
+ }
+ setInstance() {
+ this.instance = new CSS2DRenderer();
+ this.instance.setSize(this.sizes.width, this.sizes.height);
+ this.instance.domElement.style.position = 'absolute';
+ this.instance.domElement.style.top = '0px';
+ this.instance.domElement.style.left = '0px';
+ this.instance.domElement.style.pointerEvents = 'none';
+ this.container.appendChild(this.instance.domElement);
+
+ }
+ resize() {
+ this.instance.setSize(this.sizes.width, this.sizes.height);
+ this.instance.setPixelRatio(this.sizes.pixelRatio);
+ }
+ update() {
+ this.instance.render(this.scene, this.camera.instance);
+ }
+}
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/experience/index.js b/src/views/screen/components/screen-map-three/experience/index.js
index 8dd4eb2..17affbd 100644
--- a/src/views/screen/components/screen-map-three/experience/index.js
+++ b/src/views/screen/components/screen-map-three/experience/index.js
@@ -4,6 +4,7 @@
import World from "./world/world";
import Camera from "./camera";
import Renderer from "./renderer";
+import CSSRenderer from './cssRenderer';
// 宸ュ叿绫�
import Sizes from "./utils/sizes";
@@ -12,11 +13,13 @@
export default class Experience {
constructor(canvas) {
this.canvas = canvas;
+ this.container = canvas.parentElement;
this.sizes = new Sizes(this.canvas);
this.time = new Time();
this.scene = new Scene();
this.camera = new Camera(this);
this.renderer = new Renderer(this);
+ this.cssRenderer = new CSSRenderer(this);
this.world = new World(this);
// const size = 100;
@@ -40,6 +43,7 @@
this.camera.update();
this.world.update();
this.renderer.update();
+ this.cssRenderer.update();
this.stats.update();
}
}
\ No newline at end of file
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