不同业务场景下通过mars3d实现绕点旋转效果

  • 1.鼠标单击地图某一处就对该点进行绕点旋转效果

相关代码:

1.相关绕点旋转的初始化代码:

复制代码
  const rotatePoint = new mars3d.thing.RotatePoint({
    direction: false, // 方向 true逆时针,false顺时针
    time: 50 // 给定飞行一周所需时间(单位 秒),控制速度
    // autoStopAngle: 360, //到达指定角度后自动停止
  })
  map.addThing(rotatePoint)

2..对map进行单击事件的监听,拿到鼠标单击位置点的坐标后,传入new mars3d.thing.RotatePoint({里面

复制代码
export function startRotate() {
  map.on(mars3d.EventType.click, (e) => {
    const point = mars3d.LngLatPoint.fromCartesian(e.cartesian)
  rotatePoint.start(point) // 可以传指定的中心点坐标
  })
}

3.相机会绕着该单击位置进行旋转展示

  • 2.相机绕当前视角的视域中心点进行旋转

1.拿到视域中线点

2.然后再传入相关绕点旋转的位置

复制代码
export function startRotate() {
  // 获取当前视角
  const point = map.getCenter()
  rotatePoint.start(point) // 可以传指定的中心点坐标
}

3.单击开始旋转按钮,即可按照当前视域中心点进行旋转


相关链接:

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

相关推荐
前端wchen1 分钟前
Vue 3 组件通信实战系列(一)父子组件通信的标准姿势:Props 与 Emit(含实战与进阶技巧)
前端·vue.js
枯萎穿心攻击7 分钟前
ECS由浅入深第三节:进阶?System 的行为与复杂交互模式
开发语言·unity·c#·游戏引擎
code_YuJun13 分钟前
从内存角度理解JS代码执行过程
javascript
Jerry Lau14 分钟前
go go go 出发咯 - go web开发入门系列(一) helloworld
开发语言·前端·golang
Mola14 分钟前
简说Vue中的nexttick原理😎
前端
李想AI15 分钟前
在Windows系统中使用Claude code的保姆级教程,附带白嫖100美金的Claude API
前端
G等你下课16 分钟前
React 事件机制原理
前端·react.js
nananaij17 分钟前
【Python基础入门 re模块实现正则表达式操作】
开发语言·python·正则表达式
Pedantic21 分钟前
为什么 Swift 字符串不能用 `myString[3]` 随便取字符?
前端·后端
Micro麦可乐23 分钟前
Java常用加密算法详解与实战代码 - 附可直接运行的测试示例
java·开发语言·加密算法·aes加解密·rsa加解密·hash算法