CesiumJS 案例 P7:添加指定长宽的图片图层(原点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点)
CesiumJS
-
CesiumJS API:https://cesium.com/learn/cesiumjs/ref-doc/index.html
-
CesiumJS 是一个开源的 JavaScript 库,它用于在网页中创建和控制 3D 地球仪(地图)
一、添加指定长宽的图片图层(原点为图片图层的中心点)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ImageryProvider - 添加指定长宽的图片图层(原点为图片图层的中心点)</title><link rel="stylesheet" href="../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%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 图片图层的长宽const imageWidth = 200; // 单位为米const imageHeight = 100; // 单位为米// 图片图层的原点const originLongitude = 0; // 原点经度const originLatitude = 0; // 原点纬度// 在赤道上,每度大约对应 111,320 米const degreesPerMeterAtEquator = 111320;const longitudeRange = imageWidth / degreesPerMeterAtEquator;const latitudeRange = imageHeight / degreesPerMeterAtEquator;const west = originLongitude - longitudeRange / 2; // 西经(西经为负)const south = originLatitude - latitudeRange / 2; // 南纬(南纬为负)const east = originLongitude + longitudeRange / 2; // 东经(东经为正)const north = originLatitude + latitudeRange / 2; // 北纬(北纬为正)// 创建图片图层const imageryProvider = new Cesium.SingleTileImageryProvider({url: "../img/test.jpg",rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 调整相机视角以查看图片viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude, 1000.0),duration: 2.0,});</script>
</html>
二、添加指定长宽的图片图层(原点为图片图层的左上角顶点)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ImageryProvider - 添加指定长宽的图片图层(原点为图片图层的左上角顶点)</title><link rel="stylesheet" href="../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%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 图片图层的长宽const imageWidth = 200; // 单位为米const imageHeight = 100; // 单位为米// 图片图层的原点const originLongitude = 0; // 原点经度const originLatitude = 0; // 原点纬度// 在赤道上,每度大约对应 111,320 米const degreesPerMeterAtEquator = 111320;const longitudeRange = imageWidth / degreesPerMeterAtEquator;const latitudeRange = imageHeight / degreesPerMeterAtEquator;const west = originLongitude; // 西经(西经为负)const south = originLatitude - latitudeRange; // 南纬(南纬为负)const east = originLongitude + longitudeRange; // 东经(东经为正)const north = originLatitude; // 北纬(北纬为正)// 创建图片图层const imageryProvider = new Cesium.SingleTileImageryProvider({url: "../img/test.jpg",rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 调整相机视角以查看图片viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude, 1000.0),duration: 2.0,});</script>
</html>
三、添加指定长宽的图片图层(原点为图片图层的右上角顶点)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ImageryProvider - 添加指定长宽的图片图层(原点为图片图层的右上角顶点)</title><link rel="stylesheet" href="../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%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 图片图层的长宽const imageWidth = 200; // 单位为米const imageHeight = 100; // 单位为米// 图片图层的原点const originLongitude = 0; // 原点经度const originLatitude = 0; // 原点纬度// 在赤道上,每度大约对应 111,320 米const degreesPerMeterAtEquator = 111320;const longitudeRange = imageWidth / degreesPerMeterAtEquator;const latitudeRange = imageHeight / degreesPerMeterAtEquator;const west = originLongitude - longitudeRange; // 西经(西经为负)const south = originLatitude - latitudeRange; // 南纬(南纬为负)const east = originLongitude; // 东经(东经为正)const north = originLatitude; // 北纬(北纬为正)// 创建图片图层const imageryProvider = new Cesium.SingleTileImageryProvider({url: "../img/test.jpg",rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 调整相机视角以查看图片viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude, 1000.0),duration: 2.0,});</script>
</html>
四、添加指定长宽的图片图层(原点为图片图层的左下角顶点)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ImageryProvider - 添加指定长宽的图片图层(原点为图片图层的左下角顶点)</title><link rel="stylesheet" href="../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%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 图片图层的长宽const imageWidth = 200; // 单位为米const imageHeight = 100; // 单位为米// 图片图层的原点const originLongitude = 0; // 原点经度const originLatitude = 0; // 原点纬度// 在赤道上,每度大约对应 111,320 米const degreesPerMeterAtEquator = 111320;const longitudeRange = imageWidth / degreesPerMeterAtEquator;const latitudeRange = imageHeight / degreesPerMeterAtEquator;const west = originLongitude; // 西经(西经为负)const south = originLatitude; // 南纬(南纬为负)const east = originLongitude + longitudeRange; // 东经(东经为正)const north = originLatitude + latitudeRange; // 北纬(北纬为正)// 创建图片图层const imageryProvider = new Cesium.SingleTileImageryProvider({url: "../img/test.jpg",rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 调整相机视角以查看图片viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude, 1000.0),duration: 2.0,});</script>
</html>
五、添加指定长宽的图片图层(原点为图片图层的右下角顶点)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ImageryProvider - 添加指定长宽的图片图层(原点为图片图层的右下角顶点)</title><link rel="stylesheet" href="../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%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 图片图层的长宽const imageWidth = 200; // 单位为米const imageHeight = 100; // 单位为米// 图片图层的原点const originLongitude = 0; // 原点经度const originLatitude = 0; // 原点纬度// 在赤道上,每度大约对应 111,320 米const degreesPerMeterAtEquator = 111320;const longitudeRange = imageWidth / degreesPerMeterAtEquator;const latitudeRange = imageHeight / degreesPerMeterAtEquator;const west = originLongitude - longitudeRange; // 西经(西经为负)const south = originLatitude; // 南纬(南纬为负)const east = originLongitude; // 东经(东经为正)const north = originLatitude + latitudeRange; // 北纬(北纬为正)// 创建图片图层const imageryProvider = new Cesium.SingleTileImageryProvider({url: "../img/test.jpg",rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 调整相机视角以查看图片viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(originLongitude, originLatitude, 1000.0),duration: 2.0,});</script>
</html>
相关文章:
CesiumJS 案例 P7:添加指定长宽的图片图层(原点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点)
CesiumJS CesiumJS API:https://cesium.com/learn/cesiumjs/ref-doc/index.html CesiumJS 是一个开源的 JavaScript 库,它用于在网页中创建和控制 3D 地球仪(地图) 一、添加指定长宽的图片图层(原点为图片图层的中心…...
Redis 主从同步 问题
前言 相关系列 《Redis & 目录》(持续更新)《Redis & 主从同步 & 源码》(学习过程/多有漏误/仅作参考/不再更新)《Redis & 主从同步 & 总结》(学习总结/最新最准/持续更新)《Redis &a…...
【SQL Server】探讨 IN 和 EXISTS之间的区别
前言 在使用 SQL 查询相关表数据时,通常需要根据另一个表中的值来筛选数据。而 IN 与 EXISTS 子句都是用于此场景的常用方式,但使用时两者存在工作方式不同。它们使用上的选择会显著影响查询的性能,尤其是在大型数据集中。本文我们一起探讨 IN 和 EXISTS 之间的区别、使用与…...
清理pip和conda缓存
当用户目录没有空间时,可清理pip和conda缓存 清理conda缓存: conda clean --all清理pip缓存: pip cache purgeNote: 可以利用软链接,将用户目录下的文件链接到其他位置 首先移动文件或文件夹到其他位置 mv ~/test /…...
git rebase和merge的区别
Git merge和Git rebase是两种不同的合并策略,它们在处理分支合并时有各自的优点和缺点。 Git fetch git fetch 命令用于从远程仓库获取最新的更改,但不会自动合并这些更改到你的本地分支。它会下载远程仓库的所有分支和标签,并更新你的本地…...
【elkb】linux麒麟v10安装ELKB 8.8.X版本(ARM架构)
下载软件 相关版本信息 elasticsearch:8.8.1kibana:8.8.1logstash:8.8.1filebeat:8.8.1 下载地址 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.8.1-linux-aarch64.tar.gzhttps://artifacts.elastic…...
bluez hid host介绍,连接键盘/鼠标/手柄不是梦,安排
零. 前言 由于Bluez的介绍文档有限,以及对Linux 系统/驱动概念、D-Bus 通信和蓝牙协议都有要求,加上网络上其实没有一个完整的介绍Bluez系列的文档,所以不管是蓝牙初学者还是蓝牙从业人员,都有不小的难度,学习曲线也相对较陡,所以我有了这个想法,专门对Bluez做一个系统…...
GPT打数模——电商品类货量预测及品类分仓规划
背景 电商企业在各区域的商品存储主要由多个仓库组成的仓群承担。其中存储的商品主要按照属性(品类、件型等)进行划分和打标,便于进行库存管理。图 1 是一个简化的示意图,商品品类各异,件数众多,必须将这些…...
华为OD机试 - 螺旋数字矩阵 - 矩阵(Python/JS/C/C++ 2024 D卷 100分)
华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…...
分类预测 | GCN图卷积神经网络多特征分类预测(MATLAB)
分类预测 | GCN图卷积神经网络多特征分类预测(MATLAB) 目录 分类预测 | GCN图卷积神经网络多特征分类预测(MATLAB)分类效果基本介绍程序设计参考资料分类效果 基本介绍 GCN图卷积神经网络多特征分类预测(MATLAB) 在图卷积神经网络(GCN)中,多特征分类...
FPGA搭建PCIE3.0通信架构简单读写测试,基于XDMA中断模式,提供3套工程源码和技术支持
目录 1、前言工程概述免责声明 2、相关方案推荐我已有的PCIE方案本博客方案的PCIE2.0版本 3、PCIE基础知识4、工程详细设计方案工程设计原理框图XDMA配置及使用XDMA中断模块数据缓存架构用户逻辑Windows版本XDMA驱动安装Linux版本XDMA驱动安装测试应用程序工程源码架构PCIE上板…...
App相关技术以及打包
平时小伙伴们自己的博客网站只能在浏览器打开,但是有时候你想要制作自己独立个人博客app,宣传并推广自己的app,打造个人ip。如何把自己的web博客网站打包成安卓app? 1.开发App的相关技术使⽤ ⽬前市⾯上的移动互联开发技术主要分…...
【unity】【游戏开发】Unity代码不给提示怎么办?
【现象】 Unity用着用着忽然VS脚本不给提示了。 【分析】 重启Unity无效 重启VS无效 重装VS无效 感觉应该是项目设置问题 【最终方法】 打开Edit->Preferences。 如果是这个画面就把Script Editor改成自己的VS编辑器。 变成下面这个样子,点击Regenerate Pr…...
Kubernetes固定Pod IP和Mac地址
方案1: 在 Calico GitHub Issues#5196 问题的 commits#6249 提交中,引入新的 Pod 注释cni.projectcalico.org/hwAddr,用于将指定的 MAC 地址分配给容器端 Veth 接口。 将Calico升级至v3.24.1或以上版本,使用如下注解轻松设置Pod…...
计算机组成原理之数据的对齐和大/小端存放方式、计算机中数据对齐的具体方式有哪些
1、计算机组成原理之数据的对齐和大/小端存放方式 数据对齐 数据对齐是处理器为了提高处理性能而对存取数据的起始地址所提出的一种要求。 系统一次性读取内存中数据的大小是固定的,例如字长为32位的操作系统,默认的一次读取4字节内容。因此ÿ…...
【学术论文投稿】Windows11开发指南:打造卓越应用的必备攻略
【IEEE出版南方科技大学】第十一届电气工程与自动化国际会议(IFEEA 2024)_艾思科蓝_学术一站式服务平台 更多学术会议论文投稿请看:https://ais.cn/u/nuyAF3 目录 引言 一、Windows11开发环境搭建 二、Windows11关键新特性 三、Windows11设计指南 …...
【毕业论文+源码】基于SSM(Spring + Spring MVC + MyBatis)的房屋租赁系统
创建一个基于SSM(Spring Spring MVC MyBatis)框架的房屋租赁系统是一个涉及多个步骤的过程。这个过程包括但不限于需求分析、数据库设计、前端界面设计以及后端逻辑实现等。 1. 需求分析 首先,明确你的房屋租赁系统的功能需求。例如&…...
【golang】解析 JSON到指定结构体
1.解析[1,2,3,4]数组类型的json package mainimport ("encoding/json""fmt" )func main() {// JSON 数据jsonData : [1, 2, 3, 4]// 定义一个切片来接收解析后的数据var numbers []int// 解析 JSON 数据到切片err : json.Unmarshal([]byte(jsonData), &am…...
设计模式——过滤器模式
一、定义和概念 定义 C 过滤器模式(Filter Pattern)也称为标准模式(Criteria Pattern),是一种设计模式,用于根据不同的标准或条件从一组对象中筛选出符合条件的对象。它将筛选条件的逻辑封装在不同的过滤器…...
Unity(四十八):Unity与Web双向交互
效果 游戏对象绑定脚本 游戏脚本源码 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Tent : MonoBehaviour {public Camera camera;// Start is called before the first frame updatevoid Start(){}// Update is called once…...
web前端--网页练习
html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>小米</title><!-- 引…...
信息安全入门——网络安全控制
目录 前言信息安全入门:网络安全控制基础1. 用户识别技术:确认你是谁2. 访问控制技术:定义你能做什么3. 访问控制列表(ACL):精细的权限管理4. 漏洞控制:防范未然5. 入侵检测系统(IDS…...
跟着鸟儿学飞行?扑翼机器人的感知秘籍
大家好!今天来了解一篇扑翼机器人的研究——《Avian-inspired embodied perception in biohybrid flapping-wing robotics》发表于《Nature Communications》。在广阔天空中,鸟类凭借精妙翅膀结构与敏锐感知自由翱翔,这一直吸引着科学家探索其…...
Python画笔案例-093 绘制 彩虹图
1、绘制 彩虹图 通过 python 的turtle 库绘制 彩虹图,如下图: 2、实现代码 绘制 彩虹图,以下为实现代码: """彩虹图.py """ import turtledef draw_semi_circle(radius):"""画半圆函数"""turtle...
【数据结构】贪心算法:决策的艺术
贪心算法(Greedy Algorithm)是一类在每一步选择中都采取局部最优解的方法,希望最终能够达到全局最优解。通俗地说,贪心算法的思想就是“每一步都尽量做出最好的选择”,以期望整个过程的最终结果也达到最优状态。贪心算…...
Linux LVS详解
LVS(Linux Virtual Server)即Linux虚拟服务器,是一个基于Linux操作系统的高性能、可扩展的负载均衡器。以下是对LVS的详细介绍: 一、简介 LVS项目由章文嵩博士在1998年5月发起,是中国国内最早出现的自由软件项目之一…...
LabVIEW显微镜自动对焦系统
在生物医学研究中,显微镜图像的清晰度对于细胞分析非常重要。传统的手动对焦方法容易受到人为因素的影响,因此开发了一种自动对焦技术,以提高图像采集的准确性和效率。 自动对焦方法概述 该系统结合了图像清晰度评估和一维功能优化ÿ…...
基于IP的真实地址生成器
ip-geoaddress-generator 是一个基于 Web 的在线应用程序,能够根据 IP 地址生成真实的随机地址信息。通过多个 API 获取位置数据和随机用户信息,该工具为用户提供了完整的虚拟身份。它由 Next.js 和 Radix UI 构建,具备自动检测当前 IP 地址和…...
下面程序头的三个import语句可以合并或简化么?
下面程序头的三个import语句可以合并或简化么? from tkinter.simpledialog import askinteger from tkinter import * from tkinter import messagebox ——是的,三个import语句可以合并为一个。 合并后的import语句如下所示: from tkinte…...
深度学习--CNN实现猫狗识别二分类(附带下载链接, 长期有效)
1. 代码实现(包含流程解释) 样本量: 8005 # # 1.导入数据集(加载图片)数据预处理# 进行图像增强, 通过对图像的旋转 ,缩放,剪切变换, 翻转, 平移等一系列操作来生成新样本, 进而增加样本容量, # 同时对图片数值进行归一化[0:1] from tensorflow.keras.preprocessing.image …...
企业网站备案密码怎么找回/商丘网站推广公司
过山车 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 11520 Accepted Submission(s): 5072Problem DescriptionRPG girls今天和大家一起去游乐场玩。最终能够坐上梦寐以求的过山车了。但是,过山车…...
广宗企业做网站/做个小程序需要花多少钱
1 下载安装包1.1 压缩包[外链图片转存失败(img-oesO8K09-1566652568838)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw "点击并拖拽以移动")]1.2 安装包使用安装包安装则无需后续步骤[外链图片转存失败(img-Y3x59iO4-15666525…...
wordpress 上传任意附件/搜狐视频
如何判断R为第几范式? 已知一个关系模式的属性之间的语义,也就是相互依赖的关系,如何判断该模式满足第几范式? 1、首先要通过语义把属性之间的函数依赖关系列出来, 2、然后确定哪些属性组合可以候选码,从…...
源码做网站教程/百度推广优化技巧
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼最近学习CUDA C的编程,在并行运行一个简单的解调算法的时候,统计时间后发现运行速度越来越慢(但还是运算结果正确的),后来简化到只运行其中一个核函数的时候,就算复杂度下降了&#x…...
教育网站开发价钱/站内seo内容优化包括
摘要: ITSM,ITIL这些词越来越热门。 有人认为这是一种新的技术,有人认为ITSM不过是MIS的一种应用,也有人认为无非是网管+工作流。 其实ITSM的出现应该放在整个IT行业发展的过程中来看。可以说,ITSM的出现映射着IT行业的…...
冠县网站建设电话/高端大气网站建设
利用jenkins的远程构建功能,我们可以使用任何脚本,甚至定制一个Web页来控制Job的执行,但是远程构建你如果直接使用的话,老是需要登录才能执行,如何避免登录?稍微折腾了一下,调通了。 1、点击右上…...