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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/883558.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Redis的Key和Value的设计原则有哪些？

Redis的Key和Value的设计原则有哪些？

在设计 Redis 的 Key 和 Value 时&#xff0c;需要考虑一些原则&#xff0c;以确保数据存储和检索的效率&#xff0c;以及满足特定用例的需求。以下是一些设计 Redis Key 和 Value 的原则: Key 的设计原则 1.可读性:一个Key应该具有比较好的可读性&#xff0c;让人能看得懂是…
阅读更多...
Kaggle竞赛——灾难推文分类（Disaster Tweets）

Kaggle竞赛——灾难推文分类（Disaster Tweets）

目录 1. 准备工作2. 资源导入3. 数据处理4. 绘制词云图5. 数据可视化5.1 词数和字符数可视化5.2 元特征可视化5.3 类别可视化 6. 词元分析6.1 一元语法统计6.2 多元语法统计 7. 命名实体识别8. 推文主题提取9. 构建模型9.1 数据划分与封装9.2 模型训练与验证 10. 模型评估11. 测…
阅读更多...
SQL：Windows下MySQL的安装教程(超详细)

SQL：Windows下MySQL的安装教程(超详细)

一.系统环境&#xff1a; 操作系统&#xff1a; Windows11&#xff1b; MySQL版本&#xff1a; mysql-community-8.0.40.0&#xff1b; 二.MySQL下载&#xff1a; 访问MySQL 官网下载地址&#xff1a;https://www.mysql.com/&#xff0c;点击DOWNLOADS&#xff1b; 跳转后页…
阅读更多...
Maven---依赖管理,项目构建工具

Maven---依赖管理,项目构建工具

1.Maven安装和配置 1.1设置本地仓库 提前准备好仓库的位置,打开配置文件maven/conf/setting.xml 1.2配置阿里镜像源 在mirrors节点(标签)下添加阿里中央仓库镜像,把原本的镜像源注释掉,不要写在mirrors标签外 <mirror><id>alimaven</id><name>aliy…
阅读更多...
6 款超实用的 Coze 插件，让你的智能体开发效率提升 200%

6 款超实用的 Coze 插件，让你的智能体开发效率提升 200%

最近我一直在频繁使用 Coze 智能体&#xff0c;帮朋友和客户实现各种定制化需求。 Coze 不仅提供了强大的工作流编排能力和全面的功能节点&#xff0c;还有大量由开发者和平台上传的插件库支持。 对于智能体开发者来说&#xff0c;找到一款合适、好用的插件&#xff0c;真的能…
阅读更多...
python构建flask服务用于视频文件的处理后返回

python构建flask服务用于视频文件的处理后返回

背景：一个改进的 Flask 服务示例，它接收一个 MP4 文件和一个名为 `style` 的参数，并将上传的 MP4 文件保存在服务器的本地，然后返回一个预先存在的 MP4 文件。 1. **安装 Flask**： ```bash pip install Flask ``` 2. **创建 Flask 应用**： 下面是一个简单的 Flas…
阅读更多...
java学习技巧分享

java学习技巧分享

学习Java编程语言是一个循序渐进的过程&#xff0c;需要耐心和持续的努力。以下是一些有助于提高Java学习效率的技巧&#xff1a; 1. 基础知识优先&#xff1a; - 在深入学习之前&#xff0c;确保你理解了基本的计算机科学概念&#xff0c;如数据类型、变量、控制结构&#xff…
阅读更多...
【实用知识】Spring Boot 优雅捕捉异常的几种姿势

【实用知识】Spring Boot 优雅捕捉异常的几种姿势

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…
阅读更多...
设计模式(二)

设计模式(二)

设计模式(二) 敏捷开发模式&#xff1a;Refactoring to Patterns 重构特点&#xff1a; 1. 静态 --------> 动态 1. 早绑定 -----------> 晚绑定 1. 继承 ----------> 组合 1. 编译时依赖 --------> 运行时依赖 1. 紧耦合 -------> 松耦合组件协作模式 通过…
阅读更多...
JVM(HotSpot)：GC之G1垃圾回收器

JVM(HotSpot)：GC之G1垃圾回收器

文章目录 一、简介二、工作原理三、Young Collection 跨代引用四、大对象问题 一、简介 1、适用场景 同时注重吞吐量&#xff08;Throughput&#xff09;和低延迟&#xff08;Low latency&#xff09;&#xff0c;默认的暂停目标是 200 ms超大堆内存&#xff0c;会将堆划分为…
阅读更多...
华为云弹性云服务器无法登录远程操作

华为云弹性云服务器无法登录远程操作

遇到的问题&#xff1a; 就是你在创建弹性云服务器的时候选择了没有子网的虚拟私有云&#xff0c; 你属于误删了虚拟私有云的子网&#xff0c;自己没有注意看 如果在华为云创建弹性云服务器时选择的虚拟私有云&#xff08;VPC&#xff09;没有配置子网&#xff0c;那么在尝试远…
阅读更多...
压力测试指南-压力测试中的性能瓶颈定位与优化

压力测试指南-压力测试中的性能瓶颈定位与优化

压力测试中的性能瓶颈定位与优化 在当今快速迭代的软件开发环境中&#xff0c;确保应用能够承受高并发访问和大规模数据处理变得至关重要。压力测试作为评估系统极限能力的关键手段&#xff0c;不仅能揭示潜在的性能问题&#xff0c;还能指导我们进行针对性的优化。本文将深入…
阅读更多...
【mysql 进阶】2-1. MySQL 服务器介绍

【mysql 进阶】2-1. MySQL 服务器介绍

MySQL 服务器简介 通常所说的 MySQL 服务器指的是mysqld程序&#xff0c;当运⾏mysqld后对外提供MySQL 服务&#xff0c;这个专题的内容涵盖了以下关于MySQL 服务器以及相关配置的内容&#xff0c;包括&#xff1a; 服务器⽀持的启动选项。可以在命令⾏和配置⽂件中指定这些选…
阅读更多...
异次元v4.0

异次元v4.0

萌次元商城系统基于异次元店铺系统3.0 全新重构&#xff0c;历时两年精心打磨&#xff0c;初心不改。我们采用纯原生PHP打造了一款极具潜力的个人创业型商城系统。数据库底层经过对hyperf/database 的深度优化&#xff0c;感谢hyperf开发团队提供的强大ORM组件。模版渲染引擎采…
阅读更多...
嵌入式C语言字符串具体实现

嵌入式C语言字符串具体实现

大家好，今天主要给大家分享一下，如何使用C语言进行字符串操作与实现。 第一：字符串相关操作实现 复制函数五个基本要素： 头文件：#include <string.h> 函数原型：strcpy(char dest[],char src[]) -----string copy 功能：把src数组中\0之前的所有字符，连同‘\…
阅读更多...
在xml 中 不等式 做转义处理的问题

在xml 中 不等式 做转义处理的问题

对于这种要做转义处理&#xff0c;<![CDATA[ < ]]>
阅读更多...
DevEco Studio的使用 习题答案＜HarmonyOS第一课＞

DevEco Studio的使用 习题答案＜HarmonyOS第一课＞

一、判断题 1. 如果代码中涉及到一些网络、数据库、传感器等功能的开发，均可使用预览器进行预览。 正确(True)错误(False) 错误(False)回答正确 2. module.json5文件中的deviceTypes字段中，配置了phone，tablet，2in1等多种设备类型，才能进行多设备预览。 正确(True)…
阅读更多...
redis第152节答疑 redis源码分析String重要总结

redis第152节答疑 redis源码分析String重要总结

redis的string类型&#xff0c;如果数字大于10000&#xff0c;就不去共享整数中去取&#xff0c;然后就变成了embstr或者raw&#xff0c;为什么不是new一个redisobject,并且编码为int 对于Redis的字符串类型&#xff08;String&#xff09;&#xff0c;当字符串表示的是一个整数…
阅读更多...
讲一讲 kafka 的 ack 的三种机制？

讲一讲 kafka 的 ack 的三种机制？

大家好&#xff0c;我是锋哥。今天分享关于【K讲一讲 kafka 的 ack 的三种机制&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲一讲 kafka 的 ack 的三种机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka的消息确认机制&…
阅读更多...
15分钟学 Go 第 20 天：Go的错误处理

15分钟学 Go 第 20 天：Go的错误处理

第20天&#xff1a;Go的错误处理 目标 学习如何处理错误&#xff0c;以确保Go程序的健壮性和可维护性。 1. 错误处理的重要性 在开发中&#xff0c;错误处理至关重要。程序在运行时可能会出现各种问题&#xff0c;例如文件未找到、网络连接失败等。正确的错误处理能帮助我们…
阅读更多...
最新文章

Copyright @ 2022~2023