CesiumJS 笔记 - CesiumJS 相机瞬间跳转、lookAt 方法、Point 高度无效、椭圆与图片图层、椭圆调整

发布时间：2026/10/20 13:58:56

CesiumJS 笔记 - CesiumJS 相机瞬间跳转、lookAt 方法、Point 高度无效、椭圆与图片图层、椭圆调整
CesiumJSCesiumJS 是一个开源的 JavaScript 库它用于在网页中创建和控制 3D 地球仪地图CesiumJS 官网https://www.cesium.com/CesiumJS 下载地址https://www.cesium.com/platform/cesiumjs/CesiumJS API 文档https://cesium.com/learn/cesiumjs/ref-doc/index.html一、CesiumJS 相机瞬间跳转使用 setView 方法viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(0,0,1000000.0),});使用 flyTo 方法设置 duration 为 0.0viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,1000000.0),duration:0.0,});注使用 flyTo 方法如果不设置 duration会有默认 duration// 这样写还是有飞行动画viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,1000000.0)});二、lookAt 方法1、基本介绍viewer.camera.lookAt(target,offset)lookAt 方法是让相机看向某个目标点用户无法通过鼠标自由移动视角只能缩放或围绕目标旋转参数说明target要观察的目标点世界坐标offset相机相对于目标点的偏移量笛卡尔坐标使用 lookAtTransform 方法传入单位矩阵可以解除视角锁定viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);2、演示!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleCamera - 看向某个目标点lookAt/titlelinkrelstylesheethref../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css/style*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.btn-release{position:fixed;left:0px;top:0px;}/style/headbodydividcontainer/divbuttonclassbtn-release解除视角锁定/button/bodyscriptsrc../js/Cesium-1.112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);// // 从正上方俯看天安门// viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(116.3974, 39.9086, 0), new Cesium.Cartesian3(0, 0, 5000));// 从天安门的东南上方看天安门viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(116.3974,39.9086,0),newCesium.Cartesian3(500,-500,500));constbtnReleasedocument.querySelector(.btn-release);btnRelease.addEventListener(click,(){viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);});/script/html三、Point 高度无效这里后渲染的能盖住先渲染的// 先渲染的constentityviewer.entities.add({position:Cesium.Cartesian3.fromDegrees(116.39,39.91,400),point:{pixelSize:100,color:Cesium.Color.GREEN,},});// 后渲染的constentity2viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(116.39,39.91005,200),point:{pixelSize:100,color:Cesium.Color.BLUE,},});viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(116.39,39.91,1000),duration:2.0,});Point 使用 pixelSize 定义大小它始终以固定像素显示在屏幕上它不参与深度测试即使一个点在地理上位于另一个点后面也不会被遮挡渲染顺序由添加到场景的先后顺序决定四、椭圆与图片图层椭圆始终会位于图片图层之上!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleEntity ellipse - 椭圆与图片图层/titlelinkrelstylesheethref../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css/style*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.show-ellipse{position:fixed;top:50px;left:50px;z-index:1000;}/style/headbodydividcontainerbuttonclassshow-ellipse显示椭圆/button/div/bodyscriptsrc../js/Cesium-1.112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);letshowEllipseFlagfalse;constentityviewer.entities.add({position:Cesium.Cartesian3.fromDegrees(2,2),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.5),// 颜色show:showEllipseFlag,},});constwest0;// 西经西经为负constsouth0;// 南纬南纬为负consteast4;// 东经东经为正constnorth4;// 北纬北纬为正// 创建图片图层constimageryProvidernewCesium.SingleTileImageryProvider({url:../img/test.jpg,rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});constimageryLayerviewer.imageryLayers.addImageryProvider(imageryProvider);viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,10000.0),duration:2.0,});document.querySelector(.show-ellipse).addEventListener(click,(){showEllipseFlag!showEllipseFlag;entity.ellipse.showshowEllipseFlag;});/script/html五、椭圆调整!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleEntity ellipse - 椭圆调整/titlelinkrelstylesheethref../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css/style*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.ellipse-change{position:fixed;top:50px;left:50px;z-index:1000;}/style/headbodydividcontainerbuttonclassellipse-change椭圆调整/button/div/bodyscriptsrc../js/Cesium-1.112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);constentities[];constentity1viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(0,0),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity2viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(1,1),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity3viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(2,2),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity4viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(3,3),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity5viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(4,4),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});entities.push(entity1,entity2,entity3,entity4,entity5);viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,10000.0),duration:2.0,});document.querySelector(.ellipse-change).addEventListener(click,(){entities.forEach((entity){entity.ellipse.semiMajorAxis50000*2;entity.ellipse.semiMinorAxis25000*2;});});/script/html

相关新闻

网络原理03（http协议详细解析2）

网络原理03（http协议详细解析2）

一、前文关于http协议请求的总结总结请求有：首行：方法 url 版本号，有这三个元素。请求头：就是键值对空行正文，在空行后面才是正文响应和请求很像首行：版本号 状态码 状态码描述响应头：键值对空行…

2026/10/20 6:46:32 阅读更多 →
Vibe Coding：AI代码生成的双刃剑与开发者能力重构

Vibe Coding：AI代码生成的双刃剑与开发者能力重构

1. 从“氛围感”到“氛围编程”：Vibe Coding的兴起与本质最近在技术圈里，一个叫“Vibe Coding”的词突然火了起来。乍一听，这像是个什么玄学概念，或者又是哪个营销号造出来的新词。但如果你最近尝试过用AI来辅助写代码&#xff0c…

2026/10/18 7:15:36 阅读更多 →
本地离线知识库的第一份 PDF 引用气泡是怎么连回原文的

本地离线知识库的第一份 PDF 引用气泡是怎么连回原文的

第一次拿一份 PDF 丢给察元AI 桌面单机版的人，多半会被一个细节吸引：回答下面跟着一组引用气泡，每一个气泡都能展开成原文段落，告诉你这句话是从文档的哪一页哪一段拼出来的。这件事看着普通，背后整条链路其实做了不少…

2026/10/18 4:47:33 阅读更多 →

最新新闻

链表环与相交的底层原理：从内存地址到工程可靠性

链表环与相交的底层原理：从内存地址到工程可靠性

1. 这不是一道“刷题”题，而是数据结构底层思维的试金石“链表是否有环，是否相交”——看到这八个字，很多人第一反应是：哦，又是LeetCode第141、142、160题。翻出快慢指针模板，背下相遇点公式，提…

2026/10/20 13:57:57 阅读更多 →
AI辅助视频剪辑实操：把3小时剪片压缩到45分钟的时间账单

AI辅助视频剪辑实操：把3小时剪片压缩到45分钟的时间账单

经常有人问我：“为什么我剪一条视频要两三个小时，别人半小时就搞定了？”我一般不会直接回答，而是反过来问一句：“你剪视频的时候，是不是一直在手动做字幕？”对方往往一愣，然后陷进沉…

2026/10/20 13:57:57 阅读更多 →
DDS协议实战：分布式仿真系统实时数据分发与调优指南

DDS协议实战：分布式仿真系统实时数据分发与调优指南

做分布式仿真和实时系统这一行，通信协议往往是决定项目成败的“隐形变量”。我真正开始系统研究DDS（Data Distribution Service，数据分发服务）这个协议，是因为一个分布式仿真项目——多个异构节点要在局域网内实时同步…

2026/10/20 13:57:57 阅读更多 →
Python数据分析项目实战：从源码拆解到二次开发

Python数据分析项目实战：从源码拆解到二次开发

简介：这份资源面向希望系统掌握Python数据分析与可视化的学习者，覆盖从编程基础到实战项目的完整技能链路，适合高校学生、转行者及需要处理结构化数据的从业者。压缩包共162个文件，约31.27MB，以67个ipynb实验代码、11个…

2026/10/20 13:57:57 阅读更多 →
AI写教材如何避免重复？低查重工具嵌入创作流程的实战指南

AI写教材如何避免重复？低查重工具嵌入创作流程的实战指南

如果有人觉得“AI写教材”就是输入标题、点一下生成、再复制粘贴，那就大错特错了。真正做过教材或讲义的人都知道，教材创作最耗时的不是“写”，而是让内容准确、成体系、可教学，同时还要保证表达足够原创、不跟已有资料大面积重合…

2026/10/20 13:57:57 阅读更多 →
AO环境光遮蔽合成指南：黑线与白底之间的数值差异与混合策略

AO环境光遮蔽合成指南：黑线与白底之间的数值差异与混合策略

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 13:56:50 阅读更多 →

日新闻

CLRC663芯片Pin-to-Pin替代实战：从评估到量产全记录

CLRC663芯片Pin-to-Pin替代实战：从评估到量产全记录

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
ESP32舵机控制指南：原理、多路驱动与避坑实战

ESP32舵机控制指南：原理、多路驱动与避坑实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
位移法实现一阶低通滤波：单片机ADC采样降噪实战

位移法实现一阶低通滤波：单片机ADC采样降噪实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型（GMM）的语音识别系统，很多人第一反应就是一堆数学公式，觉得门槛很高。但如果你真的在MATLAB里把它落地跑通，会发现核心其实就是三件事：把声音变成特征向量，用GMM给每个类别…

2026/10/20 10:02:13 阅读更多 →
数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人，但落到具体操作上，无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程：对图像做反白、改调色板、彩色转灰度，最后把像素数据导出成txt文件。单看每一…

2026/10/19 17:32:41 阅读更多 →
机器人大脑技术盘点：具身智能的感知、决策与数据闭环

机器人大脑技术盘点：具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词，你会发现一个很有意思的现象：每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型，有人指的是运动控制系统，还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/20 2:50:50 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 10:02:08 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:45 阅读更多 →