3d地图修改标签

src/view/home.vue

@@ -340,6 +340,7 @@ import mapPopover from './mapPopover.vue'
 					</div>
 				`
 			})))
+			
 			var Polygon=new AMap.Polygon({
 				path:[[101.6842,25.8163],[101.6942,25.8163],[101.6942,25.8063],[101.6842,25.8063]],
 				fillColor: '#ccebc5',

src/view/park/Label.js

@@ -21,7 +21,7 @@ export default class Label extends THREE.Object3D{
 		})
 		this.#imgMesh=new THREE.Mesh(geometry,material)
 		this.#imgMesh.renderOrder=6
-		this.#imgMesh.position.set(115*this.#pos[0],this.#pos[1],115*(this.#pos[2] -0.01))
+		this.#imgMesh.position.set(0, 0, 115*-0.015)
 		this.add(this.#imgMesh)
 		
 		var nameGeometry=new THREE.PlaneGeometry(this.#nameObj.box.width/16,this.#nameObj.box.height/16)
@@ -33,8 +33,9 @@ export default class Label extends THREE.Object3D{
 		})
 		this.#nameMesh=new THREE.Mesh(nameGeometry, nameMaterial)
 		this.#nameMesh.renderOrder=6
-		this.#nameMesh.position.set(115*this.#pos[0],this.#pos[1]-0.5,115*(this.#pos[2] +0.01))
+		this.#nameMesh.position.set(0, 0, 115*(0.015))
 		this.add(this.#nameMesh)
+		this.position.set(115*this.#pos[0],this.#pos[1]-0.5,115*(this.#pos[2]))
 	}
 	refesh(){
 		this.dispose()
@@ -54,6 +55,9 @@ export default class Label extends THREE.Object3D{
 		this.#nameMesh.rotation.y=y
 		this.#nameMesh.rotation.z=z
 	}
+	zoomOut(v){
+		this.scale.set(v,v,v)
+	}
 	dispose(){
 		for(var {geometry,material} of this.children){
 			geometry.dispose()

src/view/park/center.vue

@@ -281,8 +281,10 @@ import Label from './Label'
 	var group=new THREE.Group()
 	var names=[]
 	var labels=[]
+	window.the=labels
 	var items={select:null,show:null,list:[]}
 	var center=[101.863986 -0.02,25.776215 -0.01]
+	var distance=0
 	var region=reactive([
 		{name:"羊街镇",lan:101.9301474,lng:26.0574059},
 		{name:"老城乡",lan:101.8811474,lng:25.9254059},
@@ -307,6 +309,7 @@ import Label from './Label'
 
 		camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000)
 		camera.position.set(0, 100, 90)
+		distance=Math.sqrt(Math.pow(100,2)+Math.pow(90,2))
 		
 		var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
 		directionalLight.position.set(0, 0, 10).normalize();
@@ -328,6 +331,7 @@ import Label from './Label'
 		controls.maxPolarAngle=Math.PI/2
 		controls.minPolarAngle=0
 		controls.dispatchEvent=e=>{
+			var distance_now=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.y,2)+Math.pow(camera.position.z,2))
 			names.forEach(v=>{
 				v.rotation.x=camera.rotation.x
 				v.rotation.y=camera.rotation.y
@@ -335,6 +339,11 @@ import Label from './Label'
 			})
 			labels.forEach(v=>{
 				v.rotate(camera.rotation)
+				if(distance_now<distance){
+					v.zoomOut(distance_now/distance)
+				}else{
+					v.zoomOut(1)
+				}
 			})
 		}
 	}