地图 弹框

src/view/park/Point.js

@@ -0,0 +1,100 @@
+import * as THREE from 'three'
+import gsap from 'gsap'
+
+export default class Point extends THREE.Object3D{
+	#point
+	#linePoints
+	#line
+	#popover
+	#timeLine=gsap.timeline()
+	constructor (position,popover){
+		super()
+		this.#linePoints=[
+			[115*position.lan, 0.7, 115*position.lng],
+			[115*(position.lan -0.01), 6, 115*position.lng],
+			[115*(position.lan -0.2), 6, 115*position.lng],
+		]
+		this.#popover=popover
+		this.refesh()
+
+		this.#timeLine=gsap.timeline()
+		this.#timeLine.pause()
+		var line1={x:this.#linePoints[0][0],y:this.#linePoints[0][1]}
+		this.#timeLine.to(line1,{x:this.#linePoints[1][0],y:this.#linePoints[1][1], duration:0.3,onUpdate:()=>{
+			this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([
+				...this.#linePoints[0],
+				line1.x,line1.y,this.#linePoints[1][2]
+			],3))
+		}})
+		var line2={x:this.#linePoints[1][0]}
+		this.#timeLine.to(line2,{x:this.#linePoints[2][0], duration:0.7,onUpdate:()=>{
+			this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([
+				...this.#linePoints[0],
+				...this.#linePoints[1],
+				line2.x,this.#linePoints[2][1],this.#linePoints[2][2]
+			],3))
+		},onComplete:()=>{
+			this.#popover.position.set(...this.#linePoints[2])
+			this.#popover.visible=true
+		}})
+	}
+	#update(){
+		const geometry = new THREE.SphereGeometry( 0.7, 20, 20 );
+		const material = new THREE.MeshPhysicalMaterial( {
+			clearcoat: 1.0,
+			clearcoatRoughness: 0.4,
+			metalness: 0.8,
+			roughness: 0.5,
+			color: 0x69E7FC,
+			emissive:0x24BBD4,
+			flatShading:false,
+			normalScale: new THREE.Vector2( 0.15, 0.15 ),
+		});
+		this.#point=new THREE.Mesh(geometry, material)
+		this.#point.position.set(...this.#linePoints[0])
+		this.add(this.#point)//添加模型
+		//线
+		var lineGeometry=new THREE.BufferGeometry()
+		// lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([
+		// 	...this.#linePoints[0],
+		// 	...this.#linePoints[1],
+		// 	...this.#linePoints[2],
+		// ],3))
+		var lineMaterial=new THREE.LineBasicMaterial()
+		this.#line=new THREE.Line(lineGeometry,lineMaterial)
+		// this.#line.visible=false
+		this.add(this.#line)
+	}
+	refesh(){
+		this.dispose()
+		this.#update()
+	}
+	dispose(){
+		for(var {geometry,material} of this.children){
+			geometry.dispose()
+			material.dispose()
+		}
+		while (this.children[0]){
+			this.remove(this.children[0])
+		}
+	}
+	async show(){
+		await this.#timeLine.play()
+	}
+	hide(){
+		this.#popover.visible=false
+		this.#timeLine.reverse(null, false)
+	}
+	out(){
+		this.#point.scale.set(1,1,1)
+	}
+	hover(){
+		this.#point.scale.set(1.4,1.4,1.4)
+	}
+	get mesh(){
+		return this.#point
+	}
+	get time(){
+		return this.#timeLine
+	}
+}

src/view/park/center.vue

@@ -64,10 +64,10 @@
 		}
 		&>.mapCSS2D{
 			pointer-events: none;
+			z-index: 30;
 		}
 		.model{
 			&>div{
-				opacity:0;
 				position:absolute;
 				bottom:0;
 				right:calc(-289px/2);
@@ -218,7 +218,7 @@
 				</div>
 			</div>
 		</div>
-		<canvas ref="map" @mousemove="move"/>
+		<canvas ref="map" @mousemove="move" @click="showPopover"/>
 		<div ref="mapCSS2D" class="mapCSS2D"/>
 		<div ref="model" class="model">
 			<div>
@@ -229,7 +229,7 @@
 					<span class="item" data-title="品种：" style="--c:#00E4FF;">3</span>
 				</div>
 				<div class="line"/>
-				<d-scroll-board :data="list" :num="3" :delay="2000000">
+				<d-scroll-board :data="list" :num="3">
 					<template #default="{row}">
 						<span>{{row.name}}</span>
 						<span>{{row.area}}</span>
@@ -239,7 +239,7 @@
 			</div>
 		</div>
 		<svg ref="svg">
-			<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="28" font-family="serif" font-weight="900" v-html="labelName.text"></text>
+			<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="28" font-weight="900" v-html="labelName.text"></text>
 		</svg>
 	</div>
 </template>
@@ -252,7 +252,7 @@ import { nextTick, onMounted, reactive, ref, resolveTransitionHooks, shallowRef,
 import yuanmou from '@/assets/map/yuanmou.json'
 import {SVGToBase64} from 'black-knight/lib/config/tools'
 import {dScrollBoard} from 'black-knight/lib/components'
-import { Thumbs } from 'swiper';
+import Point from './Point'
 
 	var time_line=gsap.timeline()
 	time_line.pause()
@@ -276,21 +276,21 @@ import { Thumbs } from 'swiper';
 
 	var map=ref();
 	var mapCSS2D=ref()
-	var scene,renderer,camera,modalRenderer;
+	var scene,renderer,camera,modalRenderer,popover;
 	var raycaster= new THREE.Raycaster();//鼠标移动点
 	var group=new THREE.Group()
 	var names=[]
 	var labels=[]
-	var items={select:null,list:[]}
+	var items={select:null,show:null,list:[]}
 	var center=[101.863986 -0.02,25.776215 -0.01]
 	var region=reactive([
 		{name:"羊街镇",lan:101.9301474,lng:26.0574059},
 		{name:"老城乡",lan:101.8811474,lng:25.9254059},
+		{name:"凉山乡",lan:101.972559,lng:25.81227},
 		{name:"元谋镇",lan:101.8701474,lng:25.8154059},
 		{name:"平甸乡",lan:101.7647297,lng:25.7918077},
 		{name:"新华乡",lan:101.6910768,lng:25.7798770},
 		{name:"物茂乡",lan:101.7810768,lng:25.6308770},
-		{name:"凉山乡",lan:101.972559,lng:25.81227},
 		{name:"黄瓜园镇",lan:101.8653983,lng:25.7235168},
 		{name:"江边乡",lan:101.9035691,lng:25.581815},
 		{name:"姜驿乡",lan:101.9960739,lng:25.500477},
@@ -302,9 +302,11 @@ import { Thumbs } from 'swiper';
 		renderer.setPixelRatio(window.devicePixelRatio);
 		renderer.setSize(map.value.clientWidth, map.value.clientHeight)
 		
+		modalRenderer=new CSS2DRenderer({element: mapCSS2D.value})
+		modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight)
+
 		camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000)
 		camera.position.set(0, 100, 90)
-		window.c=camera
 		
 		var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
 		directionalLight.position.set(0, 0, 10).normalize();
@@ -316,8 +318,13 @@ import { Thumbs } from 'swiper';
 		group.scale.set(115,115,1)
 		group.rotation.x=-Math.PI/2
 
+		//数据展示弹框
+		popover = new CSS2DObject(model.value)
+		popover.position.set(-10,7,0)
+		popover.visible=false
+		scene.add(popover)
+
 		var controls = new MapControls(camera, map.value)
-		// controls.enableRotate=false
 		controls.maxPolarAngle=Math.PI/2
 		controls.minPolarAngle=0
 	}
@@ -379,14 +386,11 @@ import { Thumbs } from 'swiper';
 				labels.push(mesh)
 				mesh.renderOrder=6
 				mesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng))
-				watch(offset,n=>{
-					mesh.position.set(115*(-center[0]+v.lan +n.x/1000),1.5,115*(-center[1]+v.lng +n.y/1000))
-				})
 				mesh.rotation.x=-Math.PI/6
 
-				time_line.to(material,{opacity:1, duration:1,onStart(){
+				time_line.to(material,{opacity:1, duration:0.5,delay:0.2,onStart(){
 					scene.add(mesh)
-				}})
+				}},'-=0.2')
 				resolve()
 			})
 
@@ -409,9 +413,9 @@ import { Thumbs } from 'swiper';
 					adsMesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng +0.03))
 					adsMesh.rotation.x=-Math.PI/8
 
-					time_line.to(adsMaterial,{opacity:1, duration:1,onStart(){
+					time_line.to(adsMaterial,{opacity:1, duration:0.5,onStart(){
 						scene.add(adsMesh)
-					}},"-=1")
+					}},"-=0.7")
 
 					result()
 				})
@@ -643,44 +647,21 @@ import { Thumbs } from 'swiper';
 		})
 	}
 	function addPoint(){
-		const geometry = new THREE.SphereGeometry( 0.7, 20, 20 );
+		var point=new Point({lan:-center[0]+101.7877297,lng:-center[1]+25.7918077}, popover)
-		let material = new THREE.MeshPhysicalMaterial( {
+		scene.add(point)
-			clearcoat: 1.0,
+		items.list.push(point.mesh)
-			clearcoatRoughness: 0.4,
+		
-			metalness: 0.8,
+		var point=new Point({lan:-center[0]+101.8077297,lng:-center[1]+25.9018077}, popover)
-			roughness: 0.5,
+		scene.add(point)
-			color: 0x69E7FC,
+		items.list.push(point.mesh)
-			emissive:0x24BBD4,
-			flatShading:false,
-			normalScale: new THREE.Vector2( 0.15, 0.15 ),
-		});
-		var mesh=new THREE.Mesh(geometry, material)
-		mesh.name="点"
-		mesh.position.set(0,0.7,0)
-		scene.add(mesh)
-		items.list.push(mesh)
-
-		modalRenderer=new CSS2DRenderer({element: mapCSS2D.value})
-		modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight)
-
-		var demo=new CSS2DObject(model.value)
-		demo.position.set(-10,7,0)
-		scene.add(demo)
-
-
 	}
+	
 	function render(){
 		renderer.render(scene, camera);
 		modalRenderer.render(scene, camera);
 		requestAnimationFrame(render)
 
-		var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2))
-		// var h=Math.tan(camera.position.z/camera.position.x)
-		var ver=-Math.tan(z/camera.position.y)
 		names.forEach(v=>{
-			// v.rotation.x=ver
-			// v.rotation.y=h
-			// v.rotation.z=camera.rotation.z
 			v.rotation.x=camera.rotation.x
 			v.rotation.y=camera.rotation.y
 			v.rotation.z=camera.rotation.z
@@ -704,22 +685,29 @@ import { Thumbs } from 'swiper';
 			map.value.style.cursor="pointer"
 			if(items.select){
 				if(items.select!=intersects[0].object){
-					items.select.scale.set(1,1,1)
+					items.select.parent.out()
 					items.select=intersects[0].object
-					items.select.scale.set(1.4, 1.4, 1.4)
+					items.select.parent.hover()
 				}
 			}else{
 				items.select=intersects[0].object
-				items.select.scale.set(1.4, 1.4, 1.4)
+				items.select.parent.hover()
 			}
 		}else{
 			map.value.style.cursor="default"
 			if(items.select){
-				items.select.scale.set(1,1,1)
+				items.select.parent.out()
 				items.select=null
 			}
 		}
 	}
+	function showPopover(){
+		if(items.show!=items.select){
+			items.show?.parent?.hide?.()
+			items.show=items.select
+			items.show?.parent?.show?.()
+		}
+	}
 	onMounted(()=>{
 		nextTick(async()=>{
 			init()