首页 > 其他分享 >mapbox gl 相机飞行事件 flyTo

mapbox gl 相机飞行事件 flyTo

时间:2022-11-08 09:44:25浏览次数:45  
标签:camera 飞行 事件 mapbox easing gl flyTo

 map.flyTo({
            center: [camera.lon, camera.lat], //相机位置
            zoom: camera.zoom,//目标层级
            pitch: camera.pitch,//目标俯仰角
            bearing: camera.bearing,//目标方位角
            // speed: camera.speed,//飞行速度
            duration:camera.duration*1000,//飞行总时长,单位ms
            essential: true,//动画
            easing:(t) =>{               
                return t;//飞行时间进度
            }
        },
         {//eventData 自定义的事件属性
            moveend: id
        });    

mapbox地图飞行支持设置很多参数来控制飞行效果,如上图,具体可以参考mapbox官方文档,mapbox文档中对essential没有详细的说明,他有时候自动动画,有时候又没有动画,需要自己设置。

其中easing为飞行过程的进度事件,其中 t 为时间进度,所以,这里有个小心机,如果想要监听飞行结束事件,可以在easing函数中监听 t===1 ,即飞行结束。

另:eventData为可选参数,可以自定义事件对象的属性。

标签:camera,飞行,事件,mapbox,easing,gl,flyTo
From: https://www.cnblogs.com/heibaiqi/p/16868632.html

相关文章

  • OpenGL ES EGL eglMakeCurrent
    目录一.EGL前言二.EGL绘制流程简介三.eglMakeCurrent函数简介1.eglMakeCurrent简介2.eglMakeCurrent实现3.eglMakeCurrent使用四.关于多个EGLContext......
  • Gatsby custom head & Google Analytics All In One
    Gatsbycustomhead&GoogleAnalyticsAllInOneGoogleAnalytics(分析)https://analytics.google.com/analytics/web/#/a248706071p341215062/admin/streams/table/42......
  • Wdf框架中WdfDriverGlobals对象的创建
      前面写过一篇<WDF基本对象和句柄定义>,反响一般,不过这不会成为阻挡我继续写下去的绊脚石~本篇我们继续来分析Wdf框架。   WdfDriverGlobals对象的身影活跃在wdf框......
  • Springboot中使用GSON报错 An attempt was made to call the method com.google.gso
    错误如下: Description:Anattemptwasmadetocallthemethodcom.google.gson.GsonBuilder.setLenient()Lcom/google/gson/GsonBuilder;butitdoesnotexist.Itscl......
  • opengl 旋转方向
       //renderboxes   for(unsignedinti=0;i<5;i++)   {      //calculatethemodelmatrixforeachobjectandpassittoshaderbefo......
  • SpringCloud GateWay 网关 在GlobalFilter 拿出返回数据response
    前言文章主旨:  将返回数据拿出来,然后各种处理。正文 先看该篇文章的示例接口:红色框框里面就是返回的 response数据。现在我们想要的就是在返回给到调用方(前端、......
  • 服务器端glTF格式模型转换方案
    太长不看版Node.js+fbx2gltf/obj2gltf/……(初步模型转换)+@gltf-transform(精修)(+sharp/……(贴图处理)) 背景手里有个网页3D模型展示的项目,内核选了three.js......
  • Google翻译 失效 idea TKK 问题
    参考:https://bookfere.com/post/1020.html原因:谷歌翻译退出中国,可以更改host文件来实现正常使用直接使用版本142.250.0.90translate.googleapis.com142.250.0.90tr......
  • The Google File System 翻译和理解
    TheGoogleFileSystem摘要GFS是一个可扩展的分布式文件系统,用于大型分布式数据密集型应用上。它可以运行在便宜的普通硬件上,提供了高性能和一定的容错性。1.分布式......
  • OpenGlobe
    Note:OpenGlobeisgreatforlearningalongwithourbook,3DEngineDesignforVirtualGlobes.Butforaproductionquality,opensource,virtualglobebythe......