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

原理就是不断改变地图中心点，改变相机角度方向，明白这一点，其他地图引擎譬如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.lngroadLine[index-1].lat = currentCenter.latflyExtent(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();//停止漫游