四维图新 minemap实现地图漫游效果

最新推荐文章于 2025-04-17 07:08:00 发布

LBY_XK

最新推荐文章于 2025-04-17 07:08:00 发布

阅读量531

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/LBY_XK/article/details/132537905

版权

本文介绍了如何通过Cesium地图引擎实现路线的漫游效果，通过改变地图中心点和相机角度来模拟移动，但提到转弯时转向不流畅，可能是引擎限制。作者还提供了控制函数以开始和停止漫游。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理就是不断改变地图中心点，改变相机角度方向，明白这一点，其他地图引擎譬如cesium都可效仿，本人就是通过cesium的漫游实现四维图新的漫游，唯一不足的是转弯的时候不能丝滑转向，尝试过应该是四维图新引擎的问题

/*
 * @Description: 
 * @Author: 大帅逼
 * @Date: 2023-08-17 17:52:09
 * @LastEditTime: 2023-08-21 15:39:15
 * @LastEditors: Do not edit
 * @Reference: 
 */
export default function flyView (map, roadLine,nextIndex){
  
  let index = 1;
  let ding;
  let currentCenter;
  if(nextIndex){
    index = nextIndex;
  }
  const flyTime = 12000; //一段路程的飞行时间
  
  /**
   * 设置时间差
   * @returns 开始时间 结束时间
   */
  function setExtentTime(time) {
    const startTime = new Date().getTime();
    const stopTime = startTime + time;
    return {
      stopTime,
      startTime 
    };
  }

  /**
   * 相机转向角
   * @param {number} angle 角度
   * @returns {number} 弧度*/
  function bearings(startLat, startLng, destLat, destLng) {
    const y = Math.sin(destLng - startLng) * Math.cos(destLat);
    const x = Math.cos(startLat) * Math.sin(destLat) - Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
    const brng = Math.atan2(y, x);
    const brngDgr = brng * 180 / Math.PI;
    return brngDgr;
  }



  /**
   * 控制飞行动画
   */
  function flyExtent() {
    if(index>=roadLine.length-1){
      index = 1;
    }
    const time = setExtentTime(flyTime);
    const bearing = Math.abs(bearings(roadLine[index - 1].lat, roadLine[index - 1].lng, roadLine[index].lat, roadLine[index].lng));
    map.setCenter([roadLine[index - 1].lng,roadLine[index - 1].lat])
    map.setBearing(Math.abs(bearing));


    // const currentBearing = map.getBearing();
    // const angle = (bearing - currentBearing) / 5000;
    // const nowHeading = map.getBearing();
    // console.log(-bearing);



    // 构造循环体
    const loop = function () {
      const delTime = new Date().getTime() - time.startTime;
      const stepLng = (roadLine[index].lng - roadLine[index - 1].lng) / flyTime * delTime;
      const stepLat = (roadLine[index].lat - roadLine[index - 1].lat) / flyTime * delTime;
      const currentBearing = map.getBearing();
      if (delTime > 0) {
        const endPosition = [roadLine[index - 1].lng + stepLng,
          roadLine[index - 1].lat + stepLat];
          map.setCenter([endPosition[0], endPosition[1]]);
        // if(currentBearing <= bearing) {
        //   map.setCameraBearing(currentBearing+angle);
        //   console.log(angle);
        // }
      } 
    };

    // 定时器实现动画
    ding = setInterval(() => {
      loop();
      if (new Date().getTime() - time.stopTime >= 0) {
        console.log(111);
        clearInterval(ding);
        index = ++index >= roadLine.length ? 0 : index;
        if (index != 0) {
          console.log(index);
          flyExtent();
        }
      }
    }, 100);

    function stopFlyExtent() {
      clearInterval(ding);
      currentCenter = map.getCenter();
    }
    function startFlyExtent() {
      roadLine[index-1].lng = currentCenter.lng
      roadLine[index-1].lat = currentCenter.lat
      flyExtent(index);
    }
    return {stopFlyExtent,startFlyExtent,index};
  }

  /**
   * 切换相机转向角
   */
  // function changeCameraHeading () {
  //   // const changeTime = 2000;
  //   // const time = setExtentTime(changeTime);
  //   // const angle = (bearing - currentBearing) / changeTime;
      
  //   // 构造循环体
  //   // const loop = function () {
  //     const currentCenter = map.getCenter();
  //     // const currentBearing = map.getBearing();
  //     const bearing = Math.abs(bearings(currentCenter.lat,currentCenter.lng, roadLine[index].lat, roadLine[index].lng));
  //     // const delTime = new Date().getTime() - time.startTime;
  //     // const heading = delTime * angle + currentBearing;
  //   // if (delTime > 0) {
  //       map.setBearing(-bearing);
  //     // }
  //   // };
    
  //   // 定时器实现动画
  //   // const ding = setInterval(() => {
  //   //   loop();
  //   //   if (new Date().getTime() - time.stopTime >= 0) {
  //   //     console.log(111);
  //   //     clearInterval(ding);
  //   //     // index = ++index >= roadLine.length ? 0 : index;
  //   //     // if (index != 0) {
  //   //     //   console.log(index);
  //   //     //   flyExtent();
  //   //     // }
  //   //   }
  //   // }, 100);
  // }


  const control = flyExtent();
  return control;

}

const roadLine = [
  {
    lng: 118.30918373160092,
    lat: 33.8934430266404
  },
  {
    lng: 118.317598598913,
    lat: 33.89589007385073
  },
  {
    lng: 118.32260700135133,
    lat: 33.897263166704974
  },
  {
    lng: 118.32527174444655,
    lat: 33.897387332495924
  },
]
使用
this.control = flyView(map, roadLine);
this.control.startFlyExtent(); //控制开始
this.control.stopFlyExtent();//停止漫游