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

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

时间：2024-10-27 12:20:57浏览次数：3  
标签：originLongitude const 原点 originLatitude Cesium 顶点 图层 图片

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>

标签：originLongitude,const,原点,originLatitude,Cesium,顶点,图层,图片
From： https://blog.csdn.net/weixin_52173250/article/details/143266807

相关文章

  • 如何进行图片懒加载
    ​进行图片懒加载需要遵循以下步骤：一、了解懒加载的基础；二、选择合适的技术实现；三、确保向后兼容；四、优化用户体验；五、持续测试和评估。懒加载的首要任务是减少不必要的网络请求，提高页面加载速度。一、了解懒加载的基础在实施懒加载之前，我们需要了解其基本概念和背后的动机。......
  • 使用opencvjs提取图片中的红色印章
    首先看下效果：首先对于纯红色的印章提取，也就是通过提取红色的像素然后得到印章的结果，然后通过在红色的图像中寻找圆圈检测来进行圈定印章的位置源码位置：https://github.com/xxss0903/extractstamp第一步是提取红色内容functionextractStampWithColorToOpencvMat(img,......
  • 小北在GitHub上克隆项目(超详细的图文并解)之用 Python 对图片和视频进行高清修复
    前言    估计友友们应该在网上看过很多用AI修复的高清视频，最近我也有相关需求，需要修复几张图片。于是便去GitHub上寻找相关开源项目，结果还真找到一个，效果还很不错，小北这里特意分享出来给友友们~Real-ESRGAN对于算法小白的上手还是比较容易的，即便不懂算法知识，也......
  • qml圆形图片，qml圆形头像制作
    代码比较简单，就不细讲了，大家直接看下面源码吧！如果对你有所帮助，可以帮角角点个关注嘛？importQtQuickimportQtQuick.EffectsimportQt5Compat.GraphicalEffectsWindow{width:640height:480visible:truetitle:qsTr("RoundImageTest")//原......
  • Vue2 - 完美解决html2canvas截图不全问题，截屏导出的图片显示不全只有一部分或缺一块，vu
    前言该解决方案任意前端技术栈通用，不仅限Vue。在vue2（手机H5移动端/微信公众号H5页面）项目开发中，使用html2canvas截屏时发现有一部分未截取到少了一块截图不完整，导出保存图片时发现截图只有一半显示不全，另外还有一个问题就是截图时截取当前可视区域的问题（出现滚动条只保......
  • CesiumJS 案例 P6：添加图片图层、添加图片图层并覆盖指定区域
    CesiumJSCesiumJSAPI：https://cesium.com/learn/cesiumjs/ref-doc/index.htmlCesiumJS是一个开源的JavaScript库，它用于在网页中创建和控制3D地球仪（地图）一、添加图片图层<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"......
  • html添加图片的代码是什么
    在现代网页设计和开发中，图片是不可或缺的元素之一。它们可以增加视觉吸引力，传达信息，或者仅仅为了装饰效果。本文将详细解释如何在HTML文档中添加图片，包括基础的<img>标签用法，图片格式的选择，以及高级功能如图片响应式设计和懒加载等。对于初学者和中级网页开发者，这篇文章提供了一......
  • 学习vue——图片、富文本的新增与修改回显
    提要富文本使用链接：https://vueup.github.io/vue-quill/父组件1<tempalte>2<!--抽屉-->3<drawer-pageref="open"@tijiao=EmitData></drawer-page>4</template>1<scriptlang="ts"setup>2constopen......
  • SD3.5来了！图片生成界的霸主再次升级，这次玩儿大了
    在人工智能的浪潮下，图片生成技术正以前所未有的速度发展。就在我们还在为FLUX1.1的横空出世而惊叹时，StabilityAI又给了我们一个惊喜——SD3.5的发布。这款全新的图片生成模型，不仅在性能上再次超越了所有开源和商业模型，更是在功能上带来了全新的突破。模型可以扫描下方，免费......
  • 数据结构图的最短路径-弗洛伊德算法(有向图+数据结构课本C++代码一比一转C语言+邻接矩
    弗洛伊德算法有向图代码如下:#define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>#include<stdlib.h>#include<limits.h>#defineMaxInt32767#defineMVNum100intPath[MVNum][MVNum];//存放前驱索引的intD[MVNum][MVNum];//存放当前已知的权值//图的邻接......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99