调整 3d地图样式

src/view/park/center.vue

@@ -180,7 +180,7 @@
 			}
 		}
 		svg{
-			opacity: 0;
+			// opacity: 0;
 		}
 	}
 	@keyframes move {
@@ -239,7 +239,7 @@
 			</div>
 		</div>
 		<svg ref="svg">
-			<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="30" font-weight="900" v-html="labelName.text"></text>
+			<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="28" font-family="serif" font-weight="900" v-html="labelName.text"></text>
 		</svg>
 	</div>
 </template>
@@ -284,14 +284,14 @@ import { Thumbs } from 'swiper';
 	var items={select:null,list:[]}
 	var center=[101.863986 -0.02,25.776215 -0.01]
 	var region=reactive([
-		{name:"羊街乡",lan:101.9611474,lng:26.0824059},
-		{name:"老城乡",lan:101.9111474,lng:25.9554059},
-		{name:"元谋镇",lan:101.8921474,lng:25.8484059},
-		{name:"平甸乡",lan:101.7527297,lng:25.8148077},
-		{name:"新华乡",lan:101.6810768,lng:25.7208770},
+		{name:"羊街镇",lan:101.9301474,lng:26.0574059},
+		{name:"老城乡",lan:101.8811474,lng:25.9254059},
+		{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.978559,lng:25.83327},
-		{name:"黄瓜园镇",lan:101.8753983,lng:25.7285168},
+		{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},
 	])
@@ -379,6 +379,9 @@ 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(){
@@ -429,10 +432,10 @@ import { Thumbs } from 'swiper';
 		bgMesh.rotation.x=-Math.PI/2
 		bgMesh.renderOrder=1
 		
-		time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
+		time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){
 			scene.add(bgMesh)
 		}})
-		time_line.to(bgMesh.position,{y:0.1,duration:1},"-=2")
+		time_line.to(bgMesh.position,{y:0.1,duration:1},"-=1")
 	}
 	async function addBG2(){
 		var bgGeometry=new THREE.PlaneGeometry(316/9.1,599/9.1)
@@ -447,10 +450,10 @@ import { Thumbs } from 'swiper';
 		bgMesh.rotation.x=-Math.PI/2
 		bgMesh.renderOrder=2
 		
-		time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
+		time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){
 			scene.add(bgMesh)
 		}})
-		time_line.to(bgMesh.position,{y:0.2,duration:1},"-=2")
+		time_line.to(bgMesh.position,{y:0.2,duration:1},"-=1")
 
 		//标记
 		await setLine(
@@ -462,7 +465,7 @@ import { Thumbs } from 'swiper';
 			]
 		)
 		await setLine(
-			[101.750373,0.21,25.725215],
+			[101.750373,0.21,25.735215],
 			{text:"<tspan>现代冬早蔬菜联农</tspan><tspan x='0' y='36'>带农业产业示范区</tspan>",color:"#10CC40",order:2},
 			[
 				-0.02, 2, 0,
@@ -491,10 +494,10 @@ import { Thumbs } from 'swiper';
 		bgMesh.position.set(115*(-center[0]+101.886473),10,115*(-center[1]+25.770215))
 		bgMesh.rotation.x=-Math.PI/2
 		
-		time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
+		time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){
 			scene.add(bgMesh)
 		}})
-		time_line.to(bgMesh.position,{y:0.3,duration:1},"-=2")
+		time_line.to(bgMesh.position,{y:0.3,duration:1},"-=1")
 
 		await setLine(
 			[101.820373,0.31,25.695215],
@@ -518,13 +521,13 @@ import { Thumbs } from 'swiper';
 		bgMesh.position.set(115*(-center[0]+101.806473),10,115*(-center[1]+25.770215))
 		bgMesh.rotation.x=-Math.PI/2
 		
-		time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
+		time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){
 			scene.add(bgMesh)
 		}})
-		time_line.to(bgMesh.position,{y:0.4,duration:1},"-=2")
+		time_line.to(bgMesh.position,{y:0.4,duration:1},"-=1")
 
 		await setLine(
-			[101.891373,0.41,25.644215],
+			[101.891373,0.41,25.654215],
 			{text:"<tspan>右廊-要素聚集特色产业</tspan><tspan x='0' y='36'>发展廊道</tspan>",color:"#F19149",order:4},
 			[
 				0.02, 5, 0,
@@ -576,9 +579,6 @@ import { Thumbs } from 'swiper';
 		})
 		var pointMesh=new THREE.Mesh(point,pointMaterial)
 		pointMesh.position.set(115*(-center[0]+label[0]),label[1],115*(-center[1]+label[2]))
-		watch(offset,n=>{
-			pointMesh.position.set(115*(-center[0]+label[0] +n.x/1000),label[1],115*(-center[1]+label[2] +n.y/1000))
-		})
 		pointMesh.rotation.x=-Math.PI/2
 		pointMesh.renderOrder=order+0.1