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

CesiumJS 案例 P7：添加指定长宽的图片图层（原点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）

news 2025/6/28 12:02:49

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.lryc.cn/news/469944.html

相关文章：

  • Redis 主从同步 问题
  • 【SQL Server】探讨 IN 和 EXISTS之间的区别
  • 清理pip和conda缓存
  • git rebase和merge的区别
  • 【elkb】linux麒麟v10安装ELKB 8.8.X版本（ARM架构）
  • bluez hid host介绍，连接键盘/鼠标/手柄不是梦，安排
  • GPT打数模——电商品类货量预测及品类分仓规划
  • 华为OD机试 - 螺旋数字矩阵 - 矩阵（Python/JS/C/C++ 2024 D卷 100分）
  • 分类预测 | GCN图卷积神经网络多特征分类预测（MATLAB）
  • FPGA搭建PCIE3.0通信架构简单读写测试，基于XDMA中断模式，提供3套工程源码和技术支持
  • App相关技术以及打包
  • 【unity】【游戏开发】Unity代码不给提示怎么办？
  • Kubernetes固定Pod IP和Mac地址
  • 计算机组成原理之数据的对齐和大/小端存放方式、计算机中数据对齐的具体方式有哪些
  • 【学术论文投稿】Windows11开发指南：打造卓越应用的必备攻略
  • 【毕业论文+源码】基于SSM（Spring + Spring MVC + MyBatis）的房屋租赁系统
  • 【golang】解析 JSON到指定结构体
  • 设计模式——过滤器模式
  • Unity（四十八）：Unity与Web双向交互
  • web前端--网页练习
  • 信息安全入门——网络安全控制
  • 跟着鸟儿学飞行？扑翼机器人的感知秘籍
  • Python画笔案例-093 绘制 彩虹图
  • 【数据结构】贪心算法：决策的艺术
  • Linux LVS详解
  • LabVIEW显微镜自动对焦系统
  • 基于IP的真实地址生成器
  • 下面程序头的三个import语句可以合并或简化么？
  • 深度学习--CNN实现猫狗识别二分类(附带下载链接, 长期有效)
  • Depcheck——专门用于检测 JavaScript 和 Node.js 项目中未使用依赖项的工具