医院为什么要做门户网站建设,做网站建设公司起名,如何给网站做备份,泾川县建设局网站原理就是不断改变地图中心点#xff0c;改变相机角度方向#xff0c;明白这一点#xff0c;其他地图引擎譬如cesium都可效仿#xff0c;本人就是通过cesium的漫游实现四维图新的漫游#xff0c;唯一不足的是转弯的时候不能丝滑转向#xff0c;尝试过应该是四维图新引擎的…原理就是不断改变地图中心点改变相机角度方向明白这一点其他地图引擎譬如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(indexroadLine.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(currentBearingangle);// 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();//停止漫游
