新建添加流动虚线路线

src/views/gdMap/index.vue

@@ -206,7 +206,7 @@ const disconnect = () => {
 
 onMounted(() => {
   // 连接mqtt
-  connect()
+  // connect()
   // 监听地图播放完成，执行事件
   emitter.$on("mapPlayComplete", handleMapPlayComplete)
   // 自动适配

src/views/gdMap/map.js

@@ -32,6 +32,8 @@ import {
   Shape,
   ExtrudeGeometry,
 } from "three"
+import * as THREE from "three"
+
 import {
   Mini3d,
   ExtrudeMap,
@@ -156,6 +158,16 @@ export class World extends Mini3d {
     this.createInfoPoint()
     // 创建轮廓
     this.createStorke()
+    // 创建标签线
+    // this.createTagLine()
+    // 创建圆滑曲线
+    this.createSmoothLine([
+      [110.9801, 39.8002],
+      [111.0806, 39.7005],
+      [111.1803, 39.6054],
+      [110.9008, 39.8056],
+      [111.1003, 39.7386],
+    ])
     // 创造3d地形
     // this.createTerrain()
     // 创造geoJson图
@@ -1405,6 +1417,110 @@ export class World extends Mini3d {
     })
   }
 
+
+  // createTagLine() {
+  //   // 创建材质
+  //   const material = new LineBasicMaterial({ color: 0xff0000 });
+  //   // 创建空几何体
+  //   const geometry = new THREE.BufferGeometry()
+  //   const points = [];
+  //   points.push(new THREE.Vector3(20, 20, 0));
+  //   points.push(new THREE.Vector3(20, -20, 0));
+  //   points.push(new THREE.Vector3(-20, -20, 0));
+  //   points.push(new THREE.Vector3(-20, 20, 0));
+  //   // 绑定顶点到空几何体
+  //   geometry.setFromPoints(points);
+  //   const line = new THREE.Line(geometry, material);
+  //   this.scene.add(line);
+
+
+
+
+  //   // const length = 0.018; // 假设每条线的长度为0.018
+  //   // const distance = length * 2; // 移动的距离
+  //   // const maxDistance = distance * 2.5; // 移动的距离
+  //   // const color = 0x2a6f72; // 线的颜色
+  //   // const { group: tagLineGroup, tween: tagLineTween } = tagLine(color, distance, maxDistance, length, 4, true)
+  //   // 直接加到场景或你需要的父级
+  //   // this.scene.add(tagLineGroup);
+
+  //   // 启动动画
+  //   // tagLineTween.start();
+  //   // tagLineTweenGroup.add(tagLineTween)
+  //   // this.scene.add(tagGroup)
+  //   // tagLineTweenGroup.getAll().forEach((tween) => {
+  //   //     tween.start()
+  //   // })
+  //   // this.scene.add(tagLineTweenGroup)
+  // }
+createSmoothLine(lngLatArr) {
+  const z = this.depth + 0.5;
+  const points = lngLatArr.map(([lng, lat]) => {
+    const [x, y] = this.geoProjection([lng, lat]);
+    return new THREE.Vector3(x, z, y);
+  });
+  const curve = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0.5);
+  const curvePoints = curve.getPoints(100);
+
+  // 计算每个点的累积距离
+  let distances = [0];
+  for (let i = 1; i < curvePoints.length; i++) {
+    distances[i] = distances[i - 1] + curvePoints[i].distanceTo(curvePoints[i - 1]);
+  }
+  const totalLength = distances[distances.length - 1];
+
+  // 添加距离属性
+  const geometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
+  const distanceAttr = new Float32Array(distances);
+  geometry.setAttribute('aDistance', new THREE.BufferAttribute(distanceAttr, 1));
+
+  // ShaderMaterial
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      color: { value: new THREE.Color(0xff0000) },
+      dashSize: { value: 0.2 },
+      gapSize: { value: 0.1 },
+      totalLength: { value: totalLength },
+      dashOffset: { value: 0 }
+    },
+    vertexShader: `
+      attribute float aDistance;
+      varying float vDistance;
+      void main() {
+        vDistance = aDistance;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 color;
+      uniform float dashSize;
+      uniform float gapSize;
+      uniform float totalLength;
+      uniform float dashOffset;
+      varying float vDistance;
+      void main() {
+        float unitLen = dashSize + gapSize;
+        float dist = mod(vDistance + dashOffset * totalLength, unitLen);
+        if(dist > dashSize) discard;
+        gl_FragColor = vec4(color, 1.0);
+      }
+    `,
+    transparent: true
+  });
+
+  const line = new THREE.Line(geometry, material);
+  this.scene.add(line);
+
+  // 动画
+  this.time.on("tick", () => {
+    material.uniforms.dashOffset.value += 0.001; // 控制流动速度
+    if(material.uniforms.dashOffset.value > 1.0) material.uniforms.dashOffset.value -= 1.0;
+  });
+
+  return line;
+}
+
+
   // 跳转到指定group 
   zoomToFocusMapGroup(group) {
     // 创建一个 Box3 来计算 focusMapGroup 的边界盒