当前位置：首页 > news >正文

Cesium 导航控件（指南针 + 缩放按钮），自定义放置位置

news 来源：原创 2025/8/11 13:21:49

Cesium 导航控件（指南针 + 缩放按钮）

Cesium 导航控件（指南针 + 缩放按钮）的功能实现，从技术角度来看，可以整理出一整套实现流程和技术结构。这套流程结合了以下几个核心技术点：

1、整体功能目标

显示指南针，旋转视角、轨道绕行
显示缩放按钮（放大、缩小）
显示重置按钮
支持响应式更新与交互
支持根据场景模式（2D/3D/Columbus）自动调整行为

2、实现流程一览图

[初始化 ViewModel (NavigationViewModel)]↓
[准备控件数据 controls + 状态变量]↓
[构建 HTML 模板字符串 (带 knockout 绑定)]↓
[loadView() → 使用 Knockout 绑定到 DOM]↓
[用户点击指南针/缩放按钮]↓
[调用各控件的 activate() 方法]↓
[执行 zoom(), rotate(), orbit(), resetView()]↓
[相机控制：camera.move / flyTo / rotate / zoomIn]

3、最终实现的效果图

在这里插入图片描述

4、全部实现代码

实现上述效果图的源码

使用简单讲解

在html文件中引用CesiumNavigation.umd.js和cesium-navigation.css
初始化viewer 调用CesiumNavigation.umd(viewer, options)


var  viewer = new Cesium.Viewer("cesium-container", {geocoder: true,              //控制地图是否显示一个地理编码（geocoding）控件，允许用户搜索地点并定位到特定位置。homeButton: false,            //控制是否显示一个回到初始视图的按钮，允许用户快速返回到地图的初始状态animation: false,             //控制是否显示动画控件，允许用户播放、暂停或者改变时间。fullscreenButton: false,      //控制是否显示全屏按钮，允许用户切换地图进入或退出全屏模式。sceneModePicker: false,       //控制是否显示场景模式选择器，允许用户在 2D、3D 和 CV（Columbus View）模式之间切换timeline: false,              //控制是否显示时间轴控件，允许用户在时间上浏览数据。navigationHelpButton: true,  //控制是否显示导航帮助按钮，提供关于如何使用地图导航控件的帮助信息baseLayerPicker: true,       //控制是否显示基础图层选择器，允许用户选择不同的基础图层（如卫星影像、地图等）。infoBox: true,               //控制是否显示信息框，当用户点击地图上的对象时，会显示与该对象相关的信息。scene3DOnly: true,           //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源selectionIndicator: true,    //控制是否显示选择指示器，用于指示当前选择的地图对象。baselLayerPicker: true,      //控制是否显示基础图层选择器，允许用户选择不同的基础图层。
});var options = {};// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
// 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
options.enableCompass = true;
// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
options.enableZoomControls = true;
// 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
options.enableDistanceLegend = true;
// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
options.enableCompassOuterRing = true;//添加自定义指南针和缩放控件的位置
options.compassPosition = {bottom:"11rem",right:"0rem"
};
options.zoomPosition = {bottom:"5rem",right:"2rem"
};
CesiumNavigation.umd(viewer, options);

Cesium 导航控件（指南针 + 缩放按钮），自定义放置位置

Cesium 导航控件（指南针缩放按钮） Cesium 导航控件（指南针缩放按钮）的功能实现，从技术角度来看，可以整理出一整套实现流程和技术结构。这套流程结合了以下几个核心技术点： 1、整体功能目标 …...

编程日记 2025/8/11 13:21:49

MySQL的索引和事务

目录 1、索引 1.1 查看索引 1.2 创建索引 1.3 删除索引 1.4 索引的实现 2、事务 1、索引索引等同于目录，属于针对查询操作的一个优化手段，可以通过索引来加快查询的速度，避免针对表进行遍历。主键、unique和外键都是会自动生成索引的…...

编程日记 2025/8/5 20:20:22

【Fifty Project - D25】

今日完成记录 TimePlan完成情况9：00 - 11：30大论文修改修改情况书小论文修改√16：00 - 17 ：00Leetcode√ Leetcode 每日一题到达最后一个房间的最小时间II：和昨天的每日一题大致一样，增加一个条件&…...

编程日记 2025/8/5 9:30:12

pip下载tmp不够

问题描述今天遇到一个小问题，在用pip安装的时候提示 ERROR: Could not install packages due to an OSError: [Errno 28] No space left on device 但我们单位用于生产环境的机器磁盘都是基本是论TB的，怎么会不够呢？ 原因分析：…...

编程日记 2025/8/10 9:20:56

一种机载扫描雷达实时超分辨成像方法——论文阅读

一种机载扫描雷达实时超分辨成像方法 1. 专利的研究目标与产业意义1.1 研究目标与实际问题1.2 产业意义2. 专利的创新方法：滑窗递归优化与实时更新2.1 核心模型与公式2.2 与传统方法对比优势3. 实验设计与验证3.1 仿真参数3.2 实验结果4. 未来研究方向与挑战4.1 学术挑战4.2 技…...

编程日记 2025/8/5 9:30:06

nginx 会话保持（cookie的配置）

nginx会话保持主要有以下几种实现方式。 1. ip_hash ip_hash使用源地址哈希算法，将同一客户端的请求总是发往同一个后端服务器，除非该服务器不可用。 ip_hash语法： upstream backend { ip_hash; server backend1.example.com; server backend2.example.com; …...

编程日记 2025/8/5 9:30:02

nginx 实现动静分离

环境 : 三个机器，准备一个nginx代理两个http 分别处理动态和静态知识点--expires expires功能说明---（为客户端配置缓存时间） nginx缓存的设置可以提高网站性能，对于网站的图片，尤其是新闻网站，图片一旦发布，改动的可能是非常小的，为了减小对服务器请求的压力，提高…...

编程日记 2025/8/5 9:30:00

k8s的pod挂载共享内存

k8s的pod挂载共享内存，限制不生效问题： 注：/dev/shm 是 Linux 系统中用于共享内存的特殊路径。通过将 emptyDir 的 medium 设置为 Memory，可以确保 /dev/shm 正确地挂载到一个基于内存的文件系统，从而实现高效的共享内…...

编程日记 2025/8/5 9:29:58

Java高频面试之并发编程-14

hello啊，各位观众姥爷们！！！本baby今天又来报道了！哈哈哈哈哈嗝🐶 面试官：指令重排有限制没有？happens-before 又是什么？ 在并发编程中，指令重排（…...

编程日记 2025/8/5 9:29:56

Linux基础(最常用基本命令)

1.查看文件ls 1.1 格式 ls 选项参数，如：ls -lah ~/ 1.2 选项设置： -l：list 以列表方式显示文件 -h：human-readable 以人类可读的方式显示文件大小(会将纯数字转换为kb，mb) -a：all 显示所有的…...

编程日记 2025/8/5 9:29:54

【Python 日期和时间】

Python 中处理日期和时间主要依赖 datetime 模块，结合 dateutil 和 pytz 等第三方库可实现更复杂的需求。以下是日期和时间处理的核心知识点： 一、基础模块 1. datetime 模块核心类：datetime, date, time, timedelta安装依赖：p…...

编程日记 2025/8/5 9:29:52

C#简易Modbus从站仿真器

C#使用NModbus库，编写从站仿真器，支持Modbus TCP访问，支持多个从站地址和动态启用/停用从站（模拟离线），支持数据变化，可以很方便实现，最终效果如图所示。项目采用.net framework 4.…...

编程日记 2025/8/5 20:20:20

timescale 1ns / 1ps // // Description: 图像裁剪算法 // module image_crop(input wire clk,input wire reset,input wire [10:0] img_width,input wire [10:0] img_height,input wire [10:0] img_x_start,input wire [10:0] img_x_end,input wire [10:0] img_y_start,input…...

编程日记 2025/8/5 8:26:56

1.MySQL数据库初体验

1.1数据库简介 1.1.1使用数据库的必要性使用数据库可以高效且条理分明地存储数据，使人们能够更加迅速、方便地管理数据。数据库特点： a.可以结构化存储大量地数据信息，方便用户进行有效的检索 b.可以有效地保持数据信息的一致性、完整…...

编程日记 2025/8/5 8:26:54

量子密码的轻量级通信协议笔记

代码笔记本文档提供了项目代码的详细说明，包括代码结构、关键算法实现和重要的代码片段。代码结构 . ├── Makefile # 构建系统配置 ├── coap_client.c # CoAP客户端实现 ├── coap_server.c # CoAP服务端实现 ├─…...

编程日记 2025/8/10 22:49:15

探索 C++ 在行业应用与技术融合中的核心价值

引言在科技飞速发展的今天，C 作为一门兼具高性能与灵活性的编程语言，正深度融入游戏开发、人工智能、区块链等多个关键领域。其高效的内存管理、底层控制能力以及对现代硬件架构的深度优化，使其成为复杂系统开发的首选语言。本文将深入探讨…...

编程日记 2025/8/5 8:26:50

雷赛伺服电机

ACM0经济编码器17位： ACM1基本编码器23位磁编， ACM2通用编码器24位光电， 插头定义：...

编程日记 2025/8/11 8:22:59

word文档基本操作：编辑页眉页脚和插入目录

文章目录引言I 编辑页眉页脚II 插入目录III 知识扩展基于axure画架构图基于Knife4j导出接口文档基于PDManer导出数据库设计文档引言背景：信息安全认证需要准备相关文件用于审核一般的开发设计包含总体设计、概要设计、详细设计、接口设计、数据库设计、部署结构设计、原型…...

编程日记 2025/8/7 7:34:43

数据结构（二）——线性表的链式表示和实现

一、单链表 1.单链表的定义如图所示每个节点包含两个域:数据域和指针域。数据域存储数据元素，指针域存储下一个节点的地址，因此指针指向的类型也是节点类型。每个指针都指向下一个节点，都是朝一个方向的，这样的链表称为单向链表…...

编程日记 2025/8/7 1:33:38

HTML10：iframe内联框架

iframe内部框架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>内联框架学习</title> </head> <body>  <iframe…...

编程日记 2025/8/5 8:26:44

C++代码随想录刷题知识分享-----数组交集—LeetCode 349

1  题目描述给定两个整型数组 nums1 和 nums2，请返回它们的交集。交集中每个元素必须是唯一的。输出结果的顺序可以任意。示例输入输出说明1nums1 [1,2,2,1], nums2 [2,2][2]2 只出现一次2nums1 [4,9,5], nums2 [9,4,9,8,4][4,9] 或 [9,4]顺序不作要求…...

编程日记 2025/8/5 8:26:42

Wireshark基本使用

本文会对Wireshark做简单介绍，带大家熟悉一下Wireshark的界面，以及如何使用过滤器。接着会带大家查看TCP五层模型下，带大家回顾各层首部的格式。最后会演示 Wireshark 如何抓取三次握手和四次挥手包的过程。目录一.Wireshark简介二…...

编程日记 2025/8/10 11:05:09

学习c语言的链表的概念、操作（另一篇链表的笔记在其他的栏目先看这个）

在学习Linux之间我们先插入一下链表的知识学习链表（一种数据结构思想） 链表和数组的区别和实现： 链表（链表是个好东西） 链表概念（什么是链表）？ 链表就是数据结构->数据的存储…...

编程日记 2025/8/5 8:26:37

快速上手Pytorch Lighting框架 | 深度学习入门

快速上手Pytorch Lighting框架 | 深度学习入门前言参考官方文档介绍快速上手基本流程常用接口LightningModule\_\_init\_\_ & setup()\*\_step()configure_callbacks()configure_optimizers()load_from_checkpoint Trainer常用参数可选接口LoggersTensorBoard Logger Ca…...

编程日记 2025/8/5 8:26:35

ffmpeg多媒体(音视频)处理常用命令

概览总结一些音视频常用的ffmpeg处理命令，会不断更新，涉及一些重要命令，各位读者也可在评论区不断更新，维护起来，希望可以帮助大家快速解决问题！ 1、音频相关 1.1 音频信息查看 ffmpeg -i test.wav 该命…...

编程日记 2025/8/5 8:26:33

QT中的网络请求

一、主程序（main.cpp） #include <QCoreApplication> #include <QNetworkAccessManager> #include <QNetworkReply> #include <QNetworkRequest> #include <QUrlQuery> #include <QJsonDocument> #include <QJso…...

编程日记 2025/8/5 8:26:31

Nacos源码—6.Nacos升级gRPC分析二

大纲 1.Nacos 2.x版本的一些变化 2.客户端升级gRPC发起服务注册 3.服务端进行服务注册时的处理 4.客户端服务发现和服务端处理服务订阅的源码分析 4.客户端服务发现和服务端处理服务订阅的源码分析 (1)Nacos客户端进行服务发现的源码 (2)Nacos服务端处理服务订阅请求的源…...

编程日记 2025/8/5 20:20:18

如何选择自己喜欢的cms

选择内容管理系统cms what is cms1.whatcms.org2.IsItWP.com4.Wappalyzer5.https://builtwith.com/6.https://w3techs.com/7. https://www.netcraft.com/8.onewebtool.com如何在不使用 CMS 检测器的情况下手动检测 CMS 结论在开始构建自己的数字足迹之前，大多数人会…...

编程日记 2025/8/5 20:20:16

前端面经作用域和作用域链

含义：JS中变量生效的区域分类：全局作用域或者局部作用域局部作用域：函数作用域和块级作用域ES6 全局作用域:在代码中任何地方都生效函数中定义函数中生效，函数结束失效块级作用域使用let或const 声明作用域链:JS查…...

编程日记 2025/8/10 23:52:57

开启智能Kubernetes管理新时代：kubectl-ai让操作更简单！

在如今的科技世界中，Kubernetes 已经成为容器编排领域的标杆，几乎所有现代应用的基础设施都离不开它。然而，面对复杂的集群管理和日常运维，许多开发者常常感到无所适从。今天，我们将为大家介绍一款结合了人工智能的强大工具——kubectl-ai。它不仅能帮助开发者更加顺畅地与…...

编程日记 2025/8/5 20:20:11

STM32 ADC

目录 ADC简介逐次逼近型ADC STM32 ADC框图输入通道转换模式 •单次转换，非扫描模式 •连续转换，非扫描模式 •单次转换，扫描模式 •连续转换，扫描模式触发控制数据对齐转换时间校准硬件电路 A…...

编程日记 2025/8/5 20:20:09

nextjs站点地图sitemap添加

app/sitemap.xml/route.ts (主站点地图索引) sitemap.xml 为文件夹名称 route.ts代码如下： import { NextResponse } from next/server; import { url } from /config/navigation; export async function GET() {// const entries generateMonthlyEntries();con…...

编程日记 2025/8/7 9:37:26

TCP/IP和OSI对比

TCP/IP模型的实际特性网络层（IP层） 仅提供无连接的不可靠服务：TCP/IP模型的网络层核心协议是IP（Internet Protocol），其设计是无连接且不可靠的。IP数据包独立传输，不保证顺序、不确认交…...

编程日记 2025/8/5 20:20:05

【hadoop】Hbase java api 案例

代码实现： HBaseConnection.java package com.peizheng.bigdata;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.client.Connection; import org.apache.hadoop.hbase.client…...

编程日记 2025/8/5 20:20:02

深入理解Spring缓存注解：@Cacheable与@CacheEvict

在现代应用程序开发中，缓存是提升系统性能的重要手段。Spring框架提供了一套简洁而强大的缓存抽象，其中Cacheable和CacheEvict是两个最常用的注解。本文将深入探讨这两个注解的工作原理、使用场景以及最佳实践。 1. Cacheable注解基本概念 Cacheable…...

编程日记 2025/8/5 20:20:00

[git]如何关联本地分支和远程分支

主题本文总结如何关联git本地分支和远程分支的相关知识点。详情查看本地分支 git branch 查看远程分支 git branch -r 查看所有分支(本地远程) git branch -a 查看本地分支及其关联的远程分支(如有) git branch -vv 关联本地分支到远程分支： git branch …...

编程日记 2025/8/5 20:19:58

Linux58 ssh服务配置 jumpserver 测试双网卡为何不能ping通ip地址

判断为NAT模式网卡能ping 通外网 ens34为仅主机模式网卡 [rootlocalhost network-scripts]# ip route show default default via 10.1.1.254 dev ens33 proto static metric 100 10.0.0.0/8 dev ens33 proto kernel scope link src 10.1.1.37 metric 100 11.0.0.0/8 dev…...

编程日记 2025/8/5 20:19:56

chart.js 柱状图Y轴数据设置起始值

事情的起因， 我以为是： chart.js 柱状图Y轴数据显示不全， 因为数据是浮点数， 换了整数测试还不行， 多次更换数据， 数据显示不全仍然存在， 而且是不固定位置的不显示。直到相同数据换了折…...

编程日记 2025/8/5 20:19:54

算法题（142）：木材加工

审题： 本题需要我们找到可以将木头切割至少k段的单段长度最长值思路： 方法一：暴力解法首先我们知道单段长度的最长值就是数组中数据的最大值max，所以我们可以遍历1~max的数据，将他们确定为l，然后计算出当…...

编程日记 2025/8/5 20:19:52

嵌入式学习--江协51单片机day3

今天学的东西挺多的，包括：自己设计的小应用，矩阵键盘，矩阵键盘密码锁，控制按键led流水灯，定时器时钟 （那个视频真的煎熬，连续两个1小时的简直要命，那个时钟也是听的似懂…...

编程日记 2025/8/5 20:19:50

Linux命令行参数注入详解

本文主要聚焦 Linux 系统及其 ELF 二进制文件，深入探讨参数注入的原理与防范措施。核心术语解析在进入主题之前，我们先厘清几个关键术语，以确保理解的准确性： 参数解析器当程序被调用时，操作系统会向程序的 main…...

编程日记 2025/8/5 13:08:46

【HCIP】----OSPF综合实验

实验题目实验需求： 1，R5为ISP，其上只能配置IP地址；R4作为企业边界路由器， 出口公网地址需要通过PPP协议获取，并进行chap认证 2，整个OSPF环境IP基于172.16.0.0/16划分； 3&#xff0…...

编程日记 2025/8/6 23:31:32

C++模板笔记

Cpp模板笔记文章目录 Cpp模板笔记1. 为什么要定义模板2. 模板的定义2.1 函数模板2.1.1 函数模板的重载2.1.2 头文件与实现文件形式（重要）2.1.3 模板的特化2.1.4 模板的参数类型2.1.5 成员函数模板2.1.6 使用模板的规则 2.2 类模板2.3 可变参数模板模板…...

编程日记 2025/8/5 13:08:42

二极管的动态特性

主要内容二极管的单向导电特性并不十分理想，这是因为二极管的本质是有P型半导体和N型半导体接触形成的PN结。 PN结除了除了构成单向到点的二极管外，还存在一个结电容，这个结电容会导致"双向"导电。也就是说，这会让二…...

编程日记 2025/8/9 16:21:38

WSL（Windows Subsystem for Linux）入门

目录 1.简介2.安装与配置3.常用命令4.进阶使用4.1 文件系统交互4.2 网络互通4.3 配置代理4.4 运行 GUI 程序4.5 Docker 集成 1.简介 WSL 是 Windows 系统内置的 Linux 兼容层，允许直接在 Windows 中运行 Linux 命令行工具和应用程序，无需虚拟机或双系统…...

编程日记 2025/8/5 13:08:38

k8s术语之secret

在kubernetes中，还存在一种和ConfigMap非常类似的对象，称之为Secret对象。它主要用于存储敏感信息，例如密码、密钥、证书等等。首先使用base64对数据进行编码 rootmaster pvs ]# echo -n admin | base64 YWRtaW4 实例：隐藏mysql密…...

编程日记 2025/8/9 23:45:49

Vue2 中 el-dialog 封装组件属性不生效的深度解析（附 $attrs、inheritAttrs 原理）

Vue2 中 el-dialog 封装组件属性不生效的深度解析（附 $attrs、inheritAttrs 原理） 在使用 Vue2 和 Element UI 进行组件封装时，我们常会遇到父组件传入的属性不生效的情况，比如在封装的 el-dialog 组件中传入 width"100%&qu…...

编程日记 2025/8/5 13:08:33

使用Compose编排工具搭建Ghost博客系统

序：需要提前自备一台部署好docker环境的虚拟机，了解并熟练compose编排工具在Centos7中，在线/离线安装Docker：https://blog.csdn.net/2301_82085712/article/details/147140694 Docker编排工具---Compose的概述及使用&#xff1…...

编程日记 2025/8/5 13:08:31

车载网络TOP20核心概念科普

一、基础协议与总线技术 CAN总线定义：控制器局域网，采用差分信号传输，速率最高1Mbps，适用于实时控制（如动力系统）。形象比喻：如同“神经系统”，负责传递关键控制信号。 LIN总线定…...

编程日记 2025/8/8 9:37:16

机器学习第一讲：机器学习本质：让机器通过数据自动寻找规律

机器学习第一讲：机器学习本质：让机器通过数据自动寻找规律资料取自《零基础学机器学习》。查看总目录：学习大纲一、从婴儿学说话说起 👶 想象你教1岁宝宝认「狗」： 第一阶段：指着不同形态的狗&#x…...

编程日记 2025/8/5 13:08:27