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，一经查实，立即删除！

相关文章

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;真的能…
阅读更多...
【实用知识】Spring Boot 优雅捕捉异常的几种姿势

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

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…
阅读更多...
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;那么在尝试远…
阅读更多...
【mysql 进阶】2-1. MySQL 服务器介绍

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

MySQL 服务器简介 通常所说的 MySQL 服务器指的是mysqld程序&#xff0c;当运⾏mysqld后对外提供MySQL 服务&#xff0c;这个专题的内容涵盖了以下关于MySQL 服务器以及相关配置的内容&#xff0c;包括&#xff1a; 服务器⽀持的启动选项。可以在命令⾏和配置⽂件中指定这些选…
阅读更多...
嵌入式C语言字符串具体实现

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

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

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

对于这种要做转义处理&#xff0c;<![CDATA[ < ]]>
阅读更多...
讲一讲 kafka 的 ack 的三种机制？

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

大家好&#xff0c;我是锋哥。今天分享关于【K讲一讲 kafka 的 ack 的三种机制&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲一讲 kafka 的 ack 的三种机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka的消息确认机制&…
阅读更多...
【计网】UDP Echo Server与Client实战：从零开始构建简单通信回显程序

【计网】UDP Echo Server与Client实战：从零开始构建简单通信回显程序

目录 前言&#xff1a; 1.实现udpserver类 1.1.创建udp socket 套接字 --- 必须要做的 socket&#xff08;&#xff09;讲解 代码实现&#xff1a;​编辑 代码讲解&#xff1a; 1.2.填充sockaddr_in结构 代码实现&#xff1a; 代码解析&#xff1a; 1.3.bind sockfd和…
阅读更多...
Vue2自定义指令及插槽

Vue2自定义指令及插槽

这里写目录标题 自定义指令基础语法指令的值封装v-loading指令 插槽默认插槽后备内容&#xff08;插槽的默认值&#xff09;具名插槽作用域插槽 自定义指令 自定义指令&#xff1a;自己定义的指令&#xff0c;封装一些dom操作&#xff0c;扩展额外功能 基础语法 全局注册&am…
阅读更多...
2024年TI杯E题-三子棋游戏装置方案分享-jdk123团队-第四弹 第二题

2024年TI杯E题-三子棋游戏装置方案分享-jdk123团队-第四弹 第二题

往期回顾 前期准备 摄像头bug解决 手搓机械臂 视觉模块的封装 下面是题目部分&#xff1a; 第二问我们继续延续第一问的思路&#xff1a; 将棋子坐标与棋盘上标定的坐标进行绑定。 代码展示&#xff1a; import RPi.GPIO as GPIO import time import cv2 import numpy as…
阅读更多...
【Qt】常用控件：按钮类控件

【Qt】常用控件：按钮类控件

思维导图&#xff1a; 一、Push Button 我们可以使用 QPushButton 表示一个按钮&#xff0c;这也是当前我们最熟悉的一个控件。QPushButton继承于QAbstractButton。这个类是一个抽象类&#xff0c;是按钮的父类。 1.1 常用的属性 属性说明text按钮中的文本icon按钮中的图标ic…
阅读更多...
Flutter登录界面使用主题

Flutter登录界面使用主题

Now, let’s use the theme we initially created in our main function for a simple login screen: 现在&#xff0c;让我们使用最初在主函数中创建的主题来制作一个简单的登录屏幕&#xff1a; Create a Login Screen Widget: Inside the main.dartfile, create a new wid…
阅读更多...
基于Springboot+Vue的候鸟监测数据管理系统 （含源码数据库）

基于Springboot+Vue的候鸟监测数据管理系统 （含源码数据库）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 这个系…
阅读更多...
MySQL 字段类型介绍

MySQL 字段类型介绍

在 MySQL 中&#xff0c;设计数据库表时&#xff0c;需要根据数据的实际需求选择合适的数据类型&#xff0c;以确保数据存储的准确性和节省存储空间。MySQL 提供了丰富的字段类型&#xff0c;主要分为以下几类&#xff1a;数值类型、字符串类型、日期时间类型、和JSON类型等。 …
阅读更多...
ffmpeg视频滤镜：定向模糊-dblur

ffmpeg视频滤镜：定向模糊-dblur

滤镜简述 dblur 官网链接 > https://ffmpeg.org/ffmpeg-filters.html#dblur 有一个模糊滤镜&#xff0c;我试了一下&#xff0c;没有感觉到它的特殊之处, 这里简单介绍一下。 滤镜使用 滤镜的参数 angle <float> ..FV.....T. set angle (from 0 t…
阅读更多...
019集——global全局引用报错解决方案（全局using指令在c#7.3中不可用）（CAD—C#二次开发入门）

019集——global全局引用报错解决方案（全局using指令在c#7.3中不可用）（CAD—C#二次开发入门）

如图&#xff0c;所示&#xff0c;全局引用global using出现报错&#xff1a; 解决方案如下&#xff1a; 新建一个类库&#xff0c;standard2.0版本。不要选.netframework 首先vs右下角更新vs版本 打开项目所在文件夹 找到项目文件.csproj&#xff0c;记事本打开。属性组位置加…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023