编辑地图

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.3.5",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.2",
+    "gsap": "^3.11.5",
     "swiper": "^9.2.0",
     "three": "^0.151.3",
     "vite-plugin-require-transform": "^1.0.4",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ specifiers:
   black-knight: 1.3.29
   echarts: ^5.4.2
   element-plus: ^2.3.2
+  gsap: ^3.11.5
   less: ^4.1.3
   less-loader: ~7.3.0
   sass-resources-loader: ^2.2.5
@@ -26,6 +27,7 @@ dependencies:
   axios: 1.3.5
   echarts: 5.4.2
   element-plus: 2.3.2_vue@3.2.47
+  gsap: 3.11.5
   swiper: 9.2.0
   three: 0.151.3
   vite-plugin-require-transform: 1.0.4
@@ -1104,6 +1106,10 @@ packages:
     dev: true
     optional: true
 
+  /gsap/3.11.5:
+    resolution: {integrity: sha512-Q89nKCLgoX5xUjznh9LcaIUkz54k1voNucT1Rpf9SJNFIQznBwFqt5qUUQbeVInFyN/n18OUJkpeI6CNEDt74w==}
+    dev: false
+
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}

src/view/home.vue

@@ -97,11 +97,17 @@
 			font-size:18px;
 		}
 		.fullScreen{
+			pointer-events: all;
+			cursor: pointer;
 			position:absolute;
 			right:20px;
-			top:24px;
+			top:20px;
 			color:#1587FC;
 			font-size:30px;
+			transition: all 0.3s;
+			&:hover{
+				opacity: 0.7;
+			}
 		}
 	}
 	&>.el-select{
@@ -146,9 +152,11 @@
 		height: calc(100% - 99px);
 		display:flex;
 		justify-content: space-between;
+		&.bgShadow{
 			background:linear-gradient(to right,rgba(var(--bg), 1) 90px,transparent 36%,transparent 64%,rgba(var(--bg), 1) 1810px);
 		}
 	}
+  }
 </style>
 <style>
 	.el-popper.search-popper{
@@ -171,7 +179,7 @@
 				<svg-icon name="home" class="home" v-else @click="$router.push({path:'/park'})"/>
 				<span class="title">{{$route.meta.title}}</span>
 				<span class="time">{{time}}11</span>
-				<svg-icon class="fullScreen" name="fullScreen"/>
+				<svg-icon class="fullScreen" name="fullScreen" @click="fullscreen"/>
 			</div>
 			<el-select
 				v-if="isMap"
@@ -185,7 +193,7 @@
 				<el-option v-for="(v,k) in baseList" :key="k" :label="v.name" :value="v.id"/>
 				<template #prefix> <svg-icon name="search"/> </template>
 			</el-select>
-			<div class="content">
+			<div class="content" :class="{bgShadow:!/park$/.test($route.path)}">
 				<router-view/>
 			</div>
 		</template>
@@ -272,6 +280,32 @@ import mapPopover from './mapPopover.vue'
 			time.value=new Date().format('yyyy-MM-dd hh:mm')
 		},1000*60)
 	}
+	function fullscreen({target}) {
+		if (document.fullscreenElement === null) {
+			if (document.mozFullScreenEnabled) {
+				return Promise.reject(new Error("全屏模式被禁用"));
+			}
+			if (target.requestFullscreen) {
+				target.requestFullscreen();
+			} else if (target.mozRequestFullScreen) {
+				target.mozRequestFullScreen();
+			} else if (target.msRequestFullscreen) {
+				target.msRequestFullscreen();
+			} else if (target.webkitRequestFullscreen) {
+				target.webkitRequestFullScreen();
+			}
+		} else {
+			if (document.exitFullscreen) {
+				document.exitFullscreen();
+			} else if (document.msExitFullscreen) {
+				document.msExitFullscreen();
+			} else if (document.mozCancelFullScreen) {
+				document.mozCancelFullScreen();
+			} else if (document.webkitExitFullscreen) {
+				document.webkitExitFullscreen();
+			}
+		}
+	}
 	onMounted(()=>{
 		refreshTime()
 

src/view/park/center.vue

@@ -53,7 +53,7 @@
 				}
 			}
 		}
-		&>canvas{
+		&>canvas,&>.modelPopover{
 			position:fixed;
 			pointer-events: all;
 			z-index: -10;
@@ -62,6 +62,9 @@
 			width:100%;
 			height:100%;
 		}
+		&>.modelPopover{
+			pointer-events: none;
+		}
 		svg{
 			opacity: 0;
 		}
@@ -85,7 +88,9 @@
 				</div>
 			</div>
 		</div>
+		<div ref="demoEl" style="height:20px;background:red;">asdaf</div>
 		<canvas ref="map" @click="tap"/>
+		<div ref="modelPopover" class="modelPopover"/>
 		<svg ref="svg">
 			<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="30" font-weight="900" v-html="labelName.text"></text>
 		</svg>
@@ -93,21 +98,33 @@
 </template>
 <script setup>
 import * as THREE from 'three'
+import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer'
+import gsap from 'gsap'
 import { MapControls } from 'three/examples/jsm/controls/MapControls'
 import { nextTick, onMounted, reactive, ref, resolveTransitionHooks, watch } from 'vue';
 import yuanmou from '@/assets/map/yuanmou.json'
 import {SVGToBase64} from 'black-knight/lib/config/tools'
 
+	var time_line=gsap.timeline()
+	var value={value:0}
+	time_line.to(value,{value:3,duration:1,onUpdate(a,b,c,d){
+		console.log(a,b,c,d,time_line,'-----afd----------')
+	},onUpdateParams:[1,2,value]})
+
+
+
 	var svg=ref()
 	var labelName=reactive({
 		text:"",
 		color:"#fff"
 	})
+	var demoEl=ref()
 
 	var offset=reactive({x:0,y:0,z:0,w:0,h:0})
 
 	var map=ref();
-	var scene,renderer,camera;
+	var modelPopover=ref()
+	var scene,renderer,camera,modalRenderer;
 	var group=new THREE.Group()
 	var names=[]
 	var labels=[]
@@ -149,7 +166,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		// controls.enableRotate=false
 		controls.maxPolarAngle=Math.PI/2
 		controls.minPolarAngle=0
-		controls.maxZoom=1.3
 	}
 	function addMap(){
 		var shape = new THREE.Shape()
@@ -358,6 +374,8 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			115*(-center[0]+label[0]+points[0]), label[1]+points[1], 115*(-center[1]+label[2]+points[2]),
 			115*(-center[0]+label[0]+points[3]), label[1]+points[4], 115*(-center[1]+label[2]+points[5]),
 		], 3))
+
+
 		var lineMaterial=new THREE.LineBasicMaterial({
 			color:color,
 		})
@@ -384,9 +402,35 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 					resolve()
 			})
 		})
+	}
+	function addPoint(){
+		const geometry = new THREE.SphereGeometry( 1, 20, 20 );
+		let 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 ),
+		});
+		var mesh=new THREE.Mesh(geometry, material)
+		mesh.position.set(0,1.5,0)
+		scene.add(mesh)
+
+		modalRenderer=new CSS2DRenderer({element: modelPopover.value})
+		modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight)
+
+		var demo=new CSS2DObject(demoEl.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))
@@ -417,6 +461,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			init()
 			addMap()
 			await addLabel()
+			addPoint()
 			render()
 			// setTimeout(()=>{
 				await addBG1()