惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

K
Kaspersky official blog
T
Threat Research - Cisco Blogs
N
News and Events Feed by Topic
Hacker News: Ask HN
Hacker News: Ask HN
Project Zero
Project Zero
Application and Cybersecurity Blog
Application and Cybersecurity Blog
博客园 - 叶小钗
Security Latest
Security Latest
Spread Privacy
Spread Privacy
aimingoo的专栏
aimingoo的专栏
N
News and Events Feed by Topic
Webroot Blog
Webroot Blog
U
Unit 42
Cyberwarzone
Cyberwarzone
小众软件
小众软件
Scott Helme
Scott Helme
Engineering at Meta
Engineering at Meta
Microsoft Security Blog
Microsoft Security Blog
T
The Blog of Author Tim Ferriss
A
About on SuperTechFans
爱范儿
爱范儿
S
Schneier on Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Schneier on Security
Schneier on Security
Latest news
Latest news
GbyAI
GbyAI
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Simon Willison's Weblog
Simon Willison's Weblog
The Register - Security
The Register - Security
WordPress大学
WordPress大学
博客园_首页
Blog — PlanetScale
Blog — PlanetScale
PCI Perspectives
PCI Perspectives
Jina AI
Jina AI
AI
AI
NISL@THU
NISL@THU
I
Intezer
G
GRAHAM CLULEY
B
Blog
S
Secure Thoughts
IT之家
IT之家
宝玉的分享
宝玉的分享
Recent Announcements
Recent Announcements
Y
Y Combinator Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell
有赞技术团队
有赞技术团队
V2EX - 技术
V2EX - 技术
Recorded Future
Recorded Future
Hacker News - Newest:
Hacker News - Newest: "LLM"

WSH

凑数日子 2026年,大概将会是最后一个人口保持在14亿以上的年份 感谢之人 数字经济中的注意力交易 突然的噩耗 一株洋瓜藤 再见到姑妈 港澳掠影 Miniflux 中文搜索能力增强 慢慢吹~~~轻轻送~~~ 房子梦 探索云南-大理 证书过期导致的错误 过年被追问工资 在秋天开始 水里的鱼 斩断联系1 云南壮族婚恋 我有一颗乳牙 世界的底色是争,抢,偷 无题4 无题3 人来人往 AI见闻 无题2 滇池掠影 WebGIS 三维空间分析之参考超图实现的天际线分析 我原来是个同步单线程 往事如烟1 净月潭之行 一万次悲伤 开源丑闻的碎碎念 提高开发幸福感所做的举措之构建前端基础设施 浏览器标签页进程引发的性能问题 山的那边 想回到过去去去去去去去去去去去去~ WebGIS开发之glsl支持 WebGIS三维空间分析之坡度计算 WebGIS 三维分析之阴影率分析 幸福(或我的女儿叫波兰) 最后一课 Markdown解析高亮及Mermaid 上海掠影 Cesium/QGIS加载图新地球LRC自定义图层 端午粽子 如何清晰地写作 清明扫墓 自编写,自用的开源工具 饮食 AI在GIS领域的实践之QGIS-MCP 燕南飞 WebGIS 三维空间分析之剖面线分析 WebGIS三维开发中的面积量测 WebGIS空间分析之坡向分析的实现 收藏自由-新的书签工具 月夜杂谈 花海,指弹版 三维之Cesium分屏显示 请验证您是真人 GIS数据转换——从点到栅格 自定义「ONE · 一个」订阅源 西湖美人峰徒步 给开源RSS服务应用Miniflux添加「标题翻译」 五一青山湖骑行 将chatGPT集成到微信机器人 动手更换旧手机——google pixel3的电池 Vue组件检测无效属性 ArcGIS复杂插件处理 两件关于博客网站变更的事情 Vue开发个人守则 账户注销后遗症 《纳瓦尔宝典 财富与幸福》前两章的一些摘录 听一首黄歌—Yellow 坏事总是成双 出差消小记 cesium-控高分析 当你孤单你会想起谁 穿越城市-青山湖 Harry Browne关于个人金融安全17条黄金守则—财富之道 批量裁剪矢量数据的几种途径 小而美的软件 想回到过去 热!热!热! 那么近,又那么远——遥望 为什么win笔记本触摸板没有mac好用呢 一只猫 二月份的检讨 线段简化的几种算法 今天看球了吗? HDF转为GeoTIFF QGIS插件编写 乐高风格地图 基于Python的遥感可视化记录 使用Python提取遥感影像中的土壤线 接触pandas QQ音乐评论可视化 拆分-应用-联合 阳光打在我身上 淘宝商品信息可视化
自定义Cesium缩放控件
WSH · 2022-08-06 · via WSH

发现Cesium并没有像ol一样提供放大缩小的控件,查阅它的文档之后,找到了几个用于移动位置的api。

move 包含六个方向的move函数,分别是moveForward、moveBackward、moveRight、moveLeft、moveUp、moveDown,实现缩放需要用到前两个,来控制相机沿着视线方向移动,以下是api说明。

了解到api后,代码部分的编写就很简单,以下是js代码示例。

function zoomInByMove(flag){
      var position = viewer.camera.positionCartographic;
      // 1表示放大,0表示缩小
      if(flag){
          viewer.camera.moveForward(position.height * 0.5)
      }
      else{
          viewer.camera.moveBackward(position.height * 0.5)
      }
  }
//绑定两个控件事件
  document.getElementById('zoomIn').addEventListener('click', function (){
      zoomInByMove(1);
  })
  document.getElementById('zoomOut').addEventListener('click', function (){
      zoomInByMove(0);
  })

zoomIn &zoomOut

看起来,这两个函数才是缩放正统,实际的效果和前面的api趋于一致。

**flyToBoundingSphere ** 在缩放的过程中,前后视图变换间没有过渡,给人一股很僵硬的感觉,为了解决整个问题,引出了第三个缩放方法,借助flyToBoundingSphere方法,以下是api说明:

我觉得这个api,最重要的概念是BoundingSphere,暂且翻译作【包围球】吧,创建它需要指定一个三维空间的点和半径长度,思路是这样的,获取视图的中心点和相机的高度,根据二者创建一个包围球,最后在移动相机的过程中修改offset参数中的Range--即相机到中心点的距离,而pitch、heading等参数使用原始数值。

以下是相关的代码:

// 获取视图中心点
function  pickCenter() {
    var ellipsoid = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(
        viewer.canvas.clientWidth / 2,
        viewer.canvas.clientHeight / 2));
    var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(ellipsoid);
    var lon = curPosition.longitude * 180 / Math.PI;
    var lat = curPosition.latitude * 180 / Math.PI;
    return {
        lon: lon,
        lat: lat
    };
}
function  zoomByBound(flag){
    const center = pickCenter()
    var height = viewer.camera.positionCartographic.height;
    const camera = viewer.camera;
    var boundingSph = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(center.lon, center.lat, 1000), height);
    var moveRate = 0;
    if(flag){
        moveRate = 0.5
    }
    else{
        moveRate = 1.5
    }
    var zoomParams = {
        duration: 0.8,
        offset: new Cesium.HeadingPitchRange(camera.heading, camera.pitch, height * moveRate)
    }
    camera.flyToBoundingSphere(boundingSph,zoomParams);
}

document.getElementById('zoomIn').addEventListener('click', function (){
    // zoomInByMove(1);
    zoomByBound(1)
})
document.getElementById('zoomOut').addEventListener('click', function (){
    // zoomInByMove(0);
    zoomByBound(0)
})

效果:

如读到这篇记录的同学有更好的实现方法、记录有错误的地方,欢迎指出。参考:Camera - Cesium Documentation