cesium入门学习一

news2025/3/16 22:45:02

 1.学习目的  

        作为网页显示,我只要实现了cesium网页显示,就可以到时候通过qt的webview显示html界面,来显示地图,js对于学过c++的人而言,没啥难度,不过是换一种语法,而且cesium的教程相对于osgearth多了太多太多,学过qt的人都知道,页面都是通过底层opengl渲染的,只不过一个显示在网页,一个显示在桌面端,原理都大差不差。

        本着有最新的技术就学习最新的技术的理念,我开始了学习cesium之旅。

         ps:实在是osgearth我找不到学习资料。

         都是一个团队开发的东西,能学最新的就学最新的。

  2.基本配置       

        在配置好了node.js环境,从github上面下载并编译好了cesium文件,搭建好了nginx服务器,端口改为了127.0.0.1:8881,

在网页打开显示

文件目录:

Cesium是编译好的js文件,scripts存放js文件,styles存放css文件,index.html是主界面的显示。

index.html的内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/index.css">
    <style>
        @import url(./Cesium/Widgets/widgets.css);
    </style>
    <title>Cesium三维地球可视化</title>
    <script src="./Cesium/Cesium.js"></script>
</head>
<body>
    <div id="cesiumContainer"></div>
</body>
<script src="./scripts/index.js"></script>
</html>

取的都是相对路径。

index.js

var viewer = new Cesium.Viewer("cesiumContainer");

index.css

html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

配置好这些,就可以在网页显示一个球。

注意:修改

3.cesium的一些基本操作

      通过修改index.js的代码,                                                                                                            

3.1   影藏界面中一些基本的组件

效果如下图所示:

修改index代码:

点击ctrl+f5执行跟新:

Cesium.Ion.defaultAccessToken = '你的密钥';

//var viewer = new Cesium.Viewer("cesiumContainer");

var viewer = new Cesium.Viewer('cesiumContainer', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        timeline: false, // 是否显示时间线控件,和animation是一组
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });

viewer.scene.debugShowFramesPerSecond = true;

3.2 绘制矩形

3.2.1 绘制矩形的第一种方式

效果

js代码:

//绘制矩形
//绘制矩形的第一种方式

var viewer = new Cesium.Viewer('cesiumContainer');
var redBox = viewer.entities.add({
  name : 'Red box with black outline',
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
  box : {
    dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material : Cesium.Color.RED.withAlpha(0.5),
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});

viewer.zoomTo(viewer.entities);

3.2.2 绘制矩形的第二种方式

效果:

js代码:

//绘制矩形的第二种方式
var czml = [{
  "id" : "document",
  "name" : "box",
  "version" : "1.0"
},{
  "id" : "shape2",
  "name" : "Red box with black outline",
  "position" : {
      "cartographicDegrees" : [-107.0, 40.0, 3000.0]
  },
  "box" : {
      "dimensions" : {
          "cartesian": [400000.0, 300000.0, 500000.0]
      },
      "material" : {
          "solidColor" : {
              "color" : {
                  "rgba" : [220, 0, 250, 127]
              }
          }
      },
      "outline" : true,
      "outlineColor" : {
          "rgba" : [0, 0, 0, 255]
      }
  }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise); 

3.3  绘制轨迹线

效果:

js代码:

//轨迹线
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义轨迹点的位置(经度、纬度、高度)
var positions = [
    -107.0, 40.0, 3000.0,
    -106.8, 40.2, 3500.0,
    -106.6, 40.6, 3200.0,
    -106.5, 40.9, 4000.0,
    -106.2, 41.1, 3800.0,
    -105.8, 41.3, 4200.0,
    -105.4, 41.7, 3900.0,
    -105.0, 42.0, 4500.0
];

// 添加轨迹线
viewer.entities.add({
    name: 'Trajectory Line',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
        width: 3, // 线宽
        material: Cesium.Color.YELLOW // 线颜色
    }
});

// 在每个点添加一个红色的标记
for (let i = 0; i < positions.length; i += 3) {
    viewer.entities.add({
        name: 'Point Marker',
        position: Cesium.Cartesian3.fromDegrees(positions[i], positions[i + 1], positions[i + 2]),
        point: {
            pixelSize: 10, // 标记点的大小
            color: Cesium.Color.RED, // 标记点的颜色
            outlineColor: Cesium.Color.BLACK, // 外边框颜色
            outlineWidth: 2 // 外边框宽度
        }
    });
}

// 将视图调整到包含所有实体的范围
viewer.zoomTo(viewer.entities);

3.4 绘制多边形

效果:

js代码:

//绘制多边形
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义多边形的点(经度、纬度、高度)
var positions = [
    Cesium.Cartesian3.fromDegrees(-107.0, 40.0),
    Cesium.Cartesian3.fromDegrees(-108.0, 40.0),
    Cesium.Cartesian3.fromDegrees(-108.5, 39.5), // 新增点
    Cesium.Cartesian3.fromDegrees(-108.0, 39.0),
    Cesium.Cartesian3.fromDegrees(-107.0, 39.0),
    Cesium.Cartesian3.fromDegrees(-106.5, 39.5)  // 新增点
];

// 添加一个多边形实体
var polygon = viewer.entities.add({
    name: 'Polygon with multiple points',
    polygon: {
        hierarchy: new Cesium.PolygonHierarchy(positions), // 多边形的点
        material: Cesium.Color.BLUE.withAlpha(0.5), // 半透明蓝色
        outline: true, // 是否显示边界
        outlineColor: Cesium.Color.BLACK // 边界颜色
    }
});

viewer.zoomTo(viewer.entities);

3.5  绘制轨迹点以及轨迹点标签

效果:

js代码:

// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 添加一个轨迹点,带有标签
var pointWithLabel = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0), // 点的经纬度
    point: {
        pixelSize: 10, // 点的大小(像素)
        color: Cesium.Color.RED, // 点的颜色
        outlineColor: Cesium.Color.WHITE, // 外边框颜色
        outlineWidth: 2 // 外边框宽度
    },
    label: {
        text: "轨迹点 1", // 标签文本
        font: "14pt sans-serif", // 字体样式
        fillColor: Cesium.Color.YELLOW, // 字体颜色
        outlineColor: Cesium.Color.BLACK, // 字体外边框颜色
        outlineWidth: 2, // 字体外边框宽度
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 标签样式
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直对齐方式
        pixelOffset: new Cesium.Cartesian2(0, -15) // 标签的偏移
    }
});

// 将视角缩放到轨迹点
viewer.zoomTo(viewer.entities);

3.6  绘制圆锥

效果:

js代码:

// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义圆锥的位置
var position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0); // 经度, 纬度, 高度

// 添加一个圆锥实体
var cone = viewer.entities.add({
    name: "Cone",
    position: position,
    cylinder: {
        length: 500000.0, // 圆锥的高度
        topRadius: 0.0, // 圆锥的顶部半径
        bottomRadius: 100000.0, // 圆锥的底部半径
        material: Cesium.Color.RED.withAlpha(0.5), // 圆锥的颜色和透明度
        outline: true, // 是否显示边框
        outlineColor: Cesium.Color.BLACK // 边框颜色
    }
});

// 将视角缩放到圆锥

4.学习目录总结

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

dify的ChatFlow自定义上传图片并通过HTTP请求到SpringBoot后端

前情提要 交互场景&#xff1a;dify的ChatFlow上传文件(本示例是单张图片)&#xff0c;通过HTTP请求至SpringBoot后端dify版本&#xff1a;0.13.2python版本&#xff1a;3.12.7 1. 自定义上传变量 在【开始】节点自定义变量单文件上传变量file 2. 下接HTTP请求节点 BODY要…

Flutter DragTarget拖拽控件详解

文章目录 1. DragTarget 控件的构造函数主要参数&#xff1a; 2. DragTarget 的工作原理3. 常见用法示例 1&#xff1a;实现一个简单的拖拽目标解释&#xff1a;示例 2&#xff1a;与 Draggable 结合使用解释&#xff1a; 4. DragTarget 的回调详解5. 总结 DragTarget 是 Flutt…

深度学习blog-Transformer-注意力机制和编码器解码器

注意力机制&#xff1a;当我们看一个图像或者听一段音频时&#xff0c;会根据自己的需求&#xff0c;集中注意力在关键元素上&#xff0c;以获取相关信息。 同样地&#xff0c;注意力机制中的模型也会根据输入的不同部分&#xff0c;给它们不同的权重&#xff0c;并集中注意力在…

改进爬山算法之一:随机化爬山法(Stochastic Hill Climbing,SHC)

随机化爬山法(Stochastic Hill Climbing),也被称为随机爬山法,是一种基于搜索算法的优化方法,是爬山算法的一个变种,它通过引入随机性来减少算法陷入局部最优解的风险,并增加搜索解空间的能力。这种方法特别适合于解决那些具有多个局部最优解的优化问题。 一、算法思想 …

AntDB 分布式集群模式部署

1 说明 如下图所示&#xff0c;AntDB 分布式数据库&#xff0c;包含计算节点&#xff08;CN&#xff09;、数据节点&#xff08;DN&#xff09;、全局事务管理 节点&#xff08;GTM&#xff09;和集群管理节点&#xff08;MGR&#xff09;&#xff0c;共 4 个组成部分。 在…

Mysql数据库Redo日志和Undo日志的理解

数据库redo日志和undo日志 1、redo日志1.1 redo日志的作用1.1.1 不使用redo日志的问题1.1.2 使用redo日志的好处 1.2 redo日志刷盘策略 2、undo日志2.1 undo日志的作用2.2 undo日志的简要生成过程 1、redo日志 事务的4大特性&#xff08;ACID&#xff09;&#xff1a;原子性、…

Git(11)之log显示支持中文

Git(11)之log显示支持中文 Author&#xff1a;Once Day Date&#xff1a;2024年12月21日 漫漫长路有人对你微笑过嘛… 参考文档&#xff1a;GIT使用log命令显示中文乱码_gitlab的log在matlab里显示中文乱码-CSDN博客 全系列文章可查看专栏: Git使用记录_Once_day的博客-CSD…

循环神经网络(RNN)入门指南:从原理到实践

目录 1. 循环神经网络的基本概念 2. 简单循环网络及其应用 3. 参数学习与优化 4. 基于门控的循环神经网络 4.1 长短期记忆网络&#xff08;LSTM&#xff09; 4.1.1 LSTM的核心组件&#xff1a; 4.2 门控循环单元&#xff08;GRU&#xff09; 5 实际应用中的优化技巧 5…

腾讯云云开发 Copilot 深度探索与实战分享

个人主页&#xff1a;♡喜欢做梦 欢迎 &#x1f44d;点赞 ➕关注 ❤️收藏 &#x1f4ac;评论 目录 一、引言 二、产品介绍 三、产品体验过程 四、整体总结 五、给开发者的复用建议 六、对 AI 辅助开发的前景展望 一、引言 在当今数字化转型加速的时代&#xff0c;…

WebRTC服务质量(10)- Pacer机制(02) RoundRobinPacketQueue

WebRTC服务质量&#xff08;01&#xff09;- Qos概述 WebRTC服务质量&#xff08;02&#xff09;- RTP协议 WebRTC服务质量&#xff08;03&#xff09;- RTCP协议 WebRTC服务质量&#xff08;04&#xff09;- 重传机制&#xff08;01) RTX NACK概述 WebRTC服务质量&#xff08;…

基于python的电子报实现思路

一种基于PDF生成电子报的思路 需求提出实现思路&#xff1a;技术路线核心代码&#xff1a; 需求提出 最近公司提出了一个电子报的需求&#xff0c;可看网上实现的思路基本上是方正系列的排版软件实现的&#xff0c;公司没必要买这么一套&#xff0c;于是按照自己的思路搞了一个…

【HarmonyOS NEXT】鸿蒙原生应用“上述”

鸿蒙原生应用“上述”已上架华为应用市场&#xff0c;欢迎升级了鸿蒙NEXT系统的用户下载体验&#xff0c;用原生更流畅。 个人CSDN鸿蒙专栏欢迎订阅&#xff1a;https://blog.csdn.net/weixin_44640245/category_12536933.html?fromshareblogcolumn&sharetypeblogcolumn&a…

IntelliJ IDEA中设置激活的profile

在IntelliJ IDEA中设置激活的profile&#xff0c;可以通过以下步骤进行&#xff1a; 通过Run/Debug Configurations设置 打开Run/Debug Configurations对话框&#xff1a; 在IDEA的顶部菜单栏中&#xff0c;选择“Run”菜单&#xff0c;然后点击“Edit Configurations...”或者…

抖去推碰一碰系统技术源码/open SDK转发技术开发

抖去推碰一碰系统技术源码/open SDK转发技术开发 碰一碰智能系统#碰碰卡系统#碰一碰系统#碰一碰系统技术源头开发 碰碰卡智能营销系统开发是一种集成了人工智能和NFC技术的工具&#xff0c;碰碰卡智能营销系统通过整合数据分析、客户关系管理、自动化营销活动、多渠道整合和个…

jumpserver docker安装

#安装jumpserver最新版本&#xff08;当前最新版本v4.5.0-ce&#xff09; curl -sSL https://resource.fit2cloud.com/jumpserver/jumpserver/releases/latest/download/quick_start.sh | bash#登录 http://192.168.31.168/ 默认账号密码 admin/ChangeMe 修改后&#xff1a; ad…

Linux shell脚本用于常见图片png、jpg、jpeg、webp、tiff格式批量转PDF文件

Linux Debian12基于ImageMagick图像处理工具编写shell脚本用于常见图片png、jpg、jpeg、webp、tiff格式批量转PDF文件&#xff0c;”多个图片分开生成多个PDF文件“或者“多个图片合并生成一个PDF文件” BiliBili视频链接&#xff1a; Linux shell脚本对常见图片格式批量转换…

详细介绍Sd-WebUI提示词的语法规则

AI绘画中最大的门槛就是提示词&#xff0c;对英语水平、文学水平、想象力、灵感等要求较高。不能每次一输入正向提示词&#xff08;positive prompt&#xff09;&#xff0c;就只会写a girl, big eyes, red hair。虽然sd-webui软件可以直接翻译&#xff0c;输入一个子母后会立刻…

对Python中队列三种实现方式的测试

一、结论 本程序模拟比较队列的三种情况&#xff1a; 一、deque当作队列使用&#xff1b; 二、queue当作队列使用&#xff1b; 三、list当作队列使用。 结论&#xff1a; Python队列可以用deque、queue、list实现&#xff0c;其中list极慢、queue较慢&#xf…

【VScode】第三方GPT编程工具-CodeMoss安装教程

一、CodeMoss是什么&#xff1f; CodeMoss是一款集编程、学习和办公于一体的高效工具。它兼容多种主流平台&#xff0c;包括VSCode、IDER、Chrome插件、Web和APP等&#xff0c;支持插件安装&#xff0c;尤其在VSCode和IDER上的表现尤为出色。无论你是编程新手还是资深开发者&a…

Unity中如何修改Sprite的渲染网格

首先打开SpriteEditor 选择Custom OutLine,点击Genrate 则在图片边缘会出现边缘线&#xff0c;调整白色小方块可以调整边缘 调整后&#xff0c;Sprite就会按照调整后的网格渲染了。 如何在UI中使用&#xff1f; 只要在UI的Image组件中选择Use Sprite Mesh 即可 结果&#xff1…