3. Cesium设置初始化视图

好久没用Cesium了,设置初始化位置的都忘了。重新捡起来把之前会的东西都整理一下。

设定初始化试图的方式有两种 1)使用camera提供的方法setView(),flyTo(),2)修改Cesium默认显示范围DEFAULT_VIEW_RECTANGLE

1. 使用Carema类提供的方法

使用Camera提供的方案很容易理解,就是定位的概念。给定初始化的位置坐标与高度信息,然后调用用 careme 方法的实现试图切换。

flyto() 与setView 都能实现,两者确保如下

  • flyTo有飞行动画效果,从初始试图到目标视图有一定的时间,并且可以通过修改 duration 参数来控制飞行动画的时长。如果地图资源加载比较耗时,可以通过这个方法争取到一定的缓冲时间。
  • setView 就没有过渡动画,直接就将显示目标视图,如果是本地资源那很合适可以快速渲染,如果地图资源加载需要时间可能需要根据情况来采用
ts 复制代码
 const viewer = new Viewer("csm-viewer-container", {
        animation: false,
        timeline: false,
        geocoder: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        homeButton: false,
        baseLayerPicker: false,
        navigationInstructionsInitiallyVisible: false,
        creditContainer: "cesium-credit"
      })
      
csmViewerRef.current = viewer
const destination = Cartesian3.fromDegrees(114.180807, 22.295909, 10000) 
viewer.camera.flyTo({ destination: destination})
viewer.camera.setView({ destination: destination})

2. 修改Cesium默认显示范围

修改Cesium默认显示范围方法也很简单,只需要修改Cesium的默认参数DEFAULT_VIEW_RECTANGLE,这个参数是一个矩形对象,可以通过Rectangle.fromDegrees(lon1,lat1,lon2,lat2) 类方法创建矩形,参数就是矩形范围的左上角端点坐标与右下角端点坐标

ts 复制代码
Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(113.802555, 22.460383, 114.491389, 22.180264)
Camera.DEFAULT_VIEW_FACTOR = 0

useEffect(() => {
    if (viewerContainerRef.current && !csmViewerRef.current) {
      const viewer = new Viewer("csm-viewer-container", {
        animation: false,
        timeline: false,
        geocoder: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        homeButton: false,
        baseLayerPicker: false,
        navigationInstructionsInitiallyVisible: false,
        creditContainer: "cesium-credit"
      })
      csmViewerRef.current = viewer
    }
  }, [viewerContainerRef])

DEFAULT_VIEW_FACTOR 这个参数可以调整视图离矩形范围的远近。 使用默认参数的方式需要注意,当存在多个Viewer实例时,其他视图也会默认使用修改后的Cesium的默认的视图范围。如果不想其他实例受影响,也想达到相同的效果那么就选择 camera.setView()

相关推荐
fanruitian3 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
rayufo3 小时前
【工具】列出指定文件夹下所有的目录和文件
开发语言·前端·python
RANCE_atttackkk3 小时前
[Java]实现使用邮箱找回密码的功能
java·开发语言·前端·spring boot·intellij-idea·idea
2501_944525545 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 支出分析页面
android·开发语言·前端·javascript·flutter
李白你好5 小时前
Burp Suite插件用于自动检测Web应用程序中的未授权访问漏洞
前端
刘一说7 小时前
Vue 组件不必要的重新渲染问题解析:为什么子组件总在“无故”刷新?
前端·javascript·vue.js
徐同保7 小时前
React useRef 完全指南:在异步回调中访问最新的 props/state引言
前端·javascript·react.js
刘一说8 小时前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h8 小时前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_395448919 小时前
main.c_cursor_0202
前端·网络·算法