【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换

这篇具有很好参考价值的文章主要介绍了【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

大家好,我是AIC山鱼!👉这是我的主页
🐋作为CSDN博主和前端优质创作者✍,我致力于为大家带来新颖、脱俗且有趣的内容。
🐱我还创建了山鱼社区,这是一个独特的社区🏠,🕺🏻为大家提供了一个交流和分享的空间。
🌲在山鱼社区中,我推出了一个名为"松鼠计划"的活动,这是一个不断更新的活动,旨在将有趣、有启发性的书籍送给社区成员已经参加活动的人。我相信通过阅读和知识的分享,我们可以拓宽视野、激发思维,并获得更多的启示
总之,我是AIC山鱼,一个充满新意、与众不同且有趣的CSDN博主和前端优质创作者👈

0.初识cesium

Cesium是一种用于创建高性能、跨平台的3D地球可视化的开源JavaScript库。它基于WebGL技术,可以在现代的Web浏览器中实现高度交互性和可视化效果的地球模型展示。

Cesium可以用于创建各种类型的地球可视化应用,包括地理信息系统(GIS)应用、地球科学研究、航空航天模拟等。它提供了丰富的功能和工具,使开发人员能够在地球表面上叠加各种数据,如地形、卫星图像、矢量数据等,并实现交互式的浏览、查询和分析。

Cesium的特点包括:

  1. 跨平台:Cesium可以在多种操作系统和设备上运行,包括Windows、Mac、Linux以及各种移动设备。
  2. 高性能:Cesium采用了基于WebGL的渲染技术,能够实现流畅的地球模型展示和数据可视化。
  3. 数据丰富:Cesium支持导入各种地球数据,如地形数据、影像数据、矢量数据等,并提供了丰富的工具和API进行数据处理和分析。
  4. 可扩展性:Cesium提供了灵活的插件和扩展机制,可以根据需要进行定制和扩展。

总的来说,Cesium是一个功能强大的开源库,为开发人员提供了创建高性能地球可视化应用的工具和框架。

1.创建第一个我们的cesium项目

首先我们可以打开cesium官网

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
下载我们所需要的资源,来创建我们的第一个cesium项目(注意不要使用最新版本的截止到现在最新版本为1.108)

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
我们可以有两种方式进行使用cesium,这里我就直接下载使用了

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
解压后我们可以看到一堆不认识的文件夹,但是当前我们只需要用到两个文件夹里面的内容,所以我们要把所使用到的文件挑出来,供我们使用。
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

1.1了解Cesium文件内容

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
从上向下依次了解

1.Apps文件夹
CesiumViewer:cesium示例。
SampleData:代码数据包括但不限于项目内模型,文件,地理信息代码。
Sandcastle:Cesium的示例程序代码。
TimelineDemo:时间轴示例代码。
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

2.Build文件夹
Cesium:Cesium库文件(下面会用到)。
CesiumUnminified:调试文件,用于寻找错误。
Documentation:API文档。
Specs:自动化单元测试文件
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

3.Source文件夹
所有类的源码以及自定义的shader(渲染)
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

4.Specs文件夹
自动化单元测试,Cesium采用了单元测试Jasmine框架

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

5.ThirdParty文件夹
第三方库:codemirror代码编辑器、dojo是一个JavaScript工具包和框架,用于构建Web应用程序和移动应用程序。Dojo提供了丰富的功能和工具,包括DOM操作、事件处理、数据绑定、模块化开发、动画效果、Ajax通信等,使开发者能够更轻松地构建复杂的交互式应用程序。jshint是JavaScript语法和风格检查工具

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

1.3创建项目

这里我们可以新建一个文件夹,存放我们自己写的项目,这是我的路径,可以像我一样,也可以自己搞,之后会用到里面的东西,只要能拿到就可以啦,然后我们在从libs同级的地方创建一个src来存放我们的项目
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
完成以上步骤之后,从src内创建html文件,我们从刚才的libs里面引入凉哥文件,分别是一下凉哥文件引入之后我们就可以开始我们的cesium之旅啦。
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

1.4创建我们首个cesium项目(没用框架)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cesium相机系统</title>
    <script src="../../libs/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../../libs/Cesium/Widgets/widgets.css">
</head>
<body>
    <div id="cesium_cameraSystem"></div>
    <script>
        // 这是我们要使用的token,我们想要获取这个token只需要打开cesium的官网注册一个账号,然后就可以找到
        Cesium.Ion.defaulyAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZjY2NTFlZC0wYTBhLTQxMTUtOGQzNS1hNWFlY2JjM2RjNzUiLCJpZCI6MTYxMTQzLCJpYXQiOjE2OTIzMjkwNjB9.4FsaQ5rL9nsbZWnDyAaQ-HkNPvgkEtHcTtX0_AhRB2E'
        const viewer = new Cesium.Viewer('cesium_cameraSystem')
    </script>
</body>
</html>

到这里,可能有小伙伴会遇到问题【我没有token怎么办啊】,不要急下面帮你解决token问题
我们首先要打开cesium的官网,然后注册一个账号或者是有账号的直接点击蓝色框内的按钮进入到自己的cesium主页
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
然后我们可以看到这么一个页面,点击AccessTokens
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

进入获取token的界面,然后复制下来(可以建一个txt文件保存它)
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
然后直接打开我们的项目,进入到浏览器,首先是一个大地球和浩瀚的宇宙映入我们眼帘,其次是一些操作项

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

1.3了解cesium基本API

首先我们来了解一下四个类【 Viewer(查看器类)Scener(场景类)Entity(实体类) DataSourceCollection(数据源集合类)】

// 1.Viewer:new Cesium.Viewer('my-cesiumContainer',options)

// 它有两个参数,分别是容器的id和options配置项
    const viewer = new Cesium.Viewer('my-cesiumContainer',{
        // 时间控制控件(默认是true,也就是开启状态)
        animation:false,
        // 时间轴控件(默认是true,也就是开启状态)
        timeline:false
    });

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

// 2.Scener,他是一个隐式类,隐式创建于Viewer里面,他是我们的3D实体类,我们可以通过他来创建/隐藏实体
	viewer.scene.globe.show = true
    // 从viewer中设置imgerLaters相当于从scene中设置
    console.log(viewer.imgerLaters == viewer.scene.imgerLaters); 
    // 我们可以通过scene来进行修改地球的图层样式,地形数据等
    viewer.scene.camera.setView({destination:Cesium.Cartesian3.fromDegrees(116, 39,1500)})
	//这三个数分别是经度,纬度,高度

此时我们的视口区域不再是整个地球,而是我们所设置的区域(一片田地)

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

// 3.Entity它是由Primitive封装后的产物,使用起来易于上手,简单便捷,可以很好的将数据呈现出来,

const entity = viewer.entities.add({
        // 设置圆点的位置
        position:Cesium.Cartesian3.fromDegrees(116, 39,1500),
         point:{
            // 圆点的大小和颜色
           pixelSize:100,
           color: Cesium.Color.RED
        }
    })
 	 // 移入摄像头,观察圆点
     viewer.trackedEntity = entity

// 它主要用于实体模型的加载,动效样式的设置

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

    // 4.DataSourceCollection它是Cesium中加载矢量数据的主要方式之一,他的最大特点就是可以支持加载矢量数据集和调用外部文件// 使用方法主要有三种:CzmlDataSource KmlDataSource GeoJsonDataSource,分别对应加载的数据是CZML,KML,GeoJSON

2、坐标系及其转换

cesium的五种坐标系

WGS84经纬度坐标系 (没有实际的对象)

WGS84弧度坐标系 (Cartographic)

笛卡尔空间直角坐标系 (Cartesian3)

平面坐标系 (Cartesian2)

4D笛卡尔坐标系 (Cartesian4)

构造Cartographic对象
new Cesium.Cartographic(longitude, latitude, height)。参数分别为经度,维度,高度

角度与弧度的换算

弧度= T/180x经纬度角度
经纬度角度=180/Tx弧度

构建对象Cartesian3
new Cesium.Cartesian3(x,y,z)

构建Cartesian2对象
new Cesium.Cartesian2(x,y)

经纬度和弧度的相互转换
经纬度转弧度、弧度转经纬度

WGS84经纬度坐标和WGS84弧度坐标系 (Cartographic) 的转换

// 构造函数法:
new Cesium.Cartographic(longitude弧度,latitude弧度,height米)
// 静态函数法:
var cartographic= Cesium.Cartographic.fromDegrees(longitude经度, latitude纬度,height高度)
var cartographic= Cesium.Cartographic.fromRadians(longitude孤度, latitude孤度,height高度)

WGS84坐标系和笛卡尔空间直角坐标系 (Cartesian3) 的转换

通过经纬度或弧度进行转换、通过度来进行转换
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

let cartesian = Cesium.Cartesian3.fromRadians(lon, lat, height);
let cartesian1 = Cesium.Cartesian3.fromRadiansArray(coordinates);
let cartesian2 = Cesium.Cartesian3.fromRadiansArrayHeights(coordinates);

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

笛卡尔空间直角坐标系转换为WGS84

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

在这我们可以看到,它打印出来的并不是经纬度坐标而是弧度坐标,所以我们要进行转化

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维

 // 直接转换
var cartographic= Cesium.Cartographic.fromCartesian(cartesian3)
// 间接转换
var cartographic= Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3)
// 多个坐标成一个数组,将所需要转换的数据放入数组内
var cartographics=
    Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray([cartesian1,cartesian2,cartesian3)

平面坐标系 (Cartesian2) 和笛卡尔空间直角坐标系 (Cartesian3) 的转换

// 屏幕坐标转场景WGS84坐标
var cartesian3= viewer.scene.pickPosition(Cartesian2)
// 屏幕坐标转地表坐标
var cartesian3= viewer.scene.globe.pick(viewer.camera.getPickRay(Cartesian2),viewer.scene):
// 屏幕坐标转椭球面坐标
var cartesian3= viewer.scene.camera.pickEllipsoid(Cartesian2)

笛卡尔空间直角坐标系转平面坐标系

var cartesian2=Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian3)

两个参数分别是场景,和笛卡尔直角坐标

平面坐标系(cartesian2)转笛卡尔空间直角坐标系(cartesian3)

下面我们就简称(cartesian2→2)(cartesian3→3)

在不包含地形,模型,等其他事物的情况下2转3,我们可以使用pickEllipsoid方法

let cartesain3 = viewer.scene.camera.pickEllipsoid(cartesian2);

在包含地形,模型,等其他事物的情况下2转3,我们可以使用pickPosition方法

let cartesian3 = viewer.scene.pickPosition(cartesian2);

角度,弧度互相转换→嗖~地址

在包含地形,模型,等其他事物的情况下2转3,我们可以使用 pickPosition 方法
let cartesian3 = viewer.scene.pickPosition(cartesian2);

角度,弧度互相转换→嗖~地址
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
配合cesium中文网使用效果绝佳
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维
【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换,Cesium,前端,javascript,三维文章来源地址https://www.toymoban.com/news/detail-680118.html

到了这里,关于【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 谷歌地球倾斜模型3Dtiles格式cesium格式一键导入查看

    台湾省倾斜模型ceisum 3Dtiles格式谷歌地球谷歌地 大家好我是谷谷GIS的开发者,为大家分享一下这个台湾省的,倾斜模型3Dtiles,这个模型3Dtiles的话它是基于cesium,3D倾斜模型3Dtiles,它的格式内容的话是模型3Dtiles,众所周知,这cesium是3D地球引擎来说的话,现在目前这个市场占比

    2024年02月11日
    浏览(51)
  • cesium中移动地球时,模型(3dtiles)感觉在飘着,会错位的解决办法

    加入一个白膜,移动视角,会感觉这个白膜不在固定的位置,飘忽不定 这是由于在这个场景中添加了地形,白膜与地形相交了。 如果给定的模型高度是高于地面的,则可以关闭地形 如果必须有地形,或者原始给定的3dtiels高度低于地面,则设置3dtiles高度高于地形 这里高度值

    2024年02月09日
    浏览(34)
  • 如何用你的知识创造额外收入

    哈喽,大家好,我是海哥,知识付费变现创业教练,教育公司培训总监,从事知识付费变现咨询10年,已助力3000+人实现知识付费变现。 今天我们来聊一聊如何用你的知识创-造额外收入。 在这个时代,知识是可以卖钱的。 蕞典型的例子就是喜马拉雅上线了众多付费语-音知识

    2024年02月09日
    浏览(34)
  • 10分钟训练属于你的AI变声器

    今天推荐一款开源AI变声器,安装过程很友好,不用经历各种麻烦的环境问题, 作者提供了windows下的安装包,一键安装启动很方便。 目前好像对显卡有要求,nvidia显卡支持,amd显卡不支持。 功能特点 使用top1检索替换输入源特征为训练集特征来杜绝音色泄漏 即便在相对较差

    2024年02月16日
    浏览(44)
  • 零基础,零成本,部署一个属于你的大模型

    前言 看了那么多chatGPT的文章,作为一名不精通算法的开发,也对大模型心痒痒。但想要部署自己的大模型,且不说没有算法相关的经验了,光是大模型占用的算力资源,手头的个人电脑其实也很难独立部署。就算使用算法压缩后的大模型,部署在个人电脑上,还要忍受极端

    2024年02月07日
    浏览(42)
  • 「AIGC」如何助力个人创意,打造属于你的独特时代?

    当今时代,人工智能(AI)不仅仅是科幻电影中的概念,也已经广泛应用于各行各业。其中,AI在创意领域的应用越来越受到关注。从AI生成的诗歌、绘画、音乐等作品的出现,到AI辅助创意产生的创意设计、广告营销等领域的应用,都为我们展示了AI在创意领域的无限可能。 AI生

    2024年02月11日
    浏览(53)
  • 外汇天眼:在交易中有多少属于你的行情?

    期货、股票、外汇不同的市场有着不同的特性,就一个市场而言,也不会是每一段行情都适合你。 刚刚进入期货、股票、外汇市场的朋友都会被其巨大的财富效应所震慑:还有这样赚钱的? 而且机会比比皆是,一夜暴富不是神话呀。 他们依靠自己的欣喜、陶醉、冲动进行着

    2024年02月04日
    浏览(46)
  • 【Vue】怎样让你的组件变得更灵活?

    在我们的日常开发中,我们一般会引入做的比较成熟的第三方UI框架,比如ElementUI。 当我们在调用UI框架中的组件时,会发现常用的调用方式有两种,一种是直接在页面中嵌入组件: 另一种则是在js中通过方法调用: 可以看到ElementUI中的组件使用方式更加灵活,可以满足不同

    2024年02月06日
    浏览(80)
  • 如何真正“不花一分钱”部署一个属于你的大模型

    看了那么多chatGPT的文章,作为一名不精通算法的开发,也对大模型心痒痒。但想要部署自己的大模型,且不说没有算法相关的经验了,光是大模型占用的算力资源,手头的个人电脑其实也很难独立部署。就算使用算法压缩后的大模型,部署在个人电脑上,还要忍受极端缓慢的

    2023年04月22日
    浏览(46)
  • Cesium 实战 - 自定义视频标签展示视频

    在封装 Cesium 工具的时候,偶然发现 Cesium 支持视频材质功能,虽然目前项目中还没有用到,但是提前做了功能封装,以后使用的时候会方便一些。 Cesium 实现视频材质的方式也比较简单,创建视频元素( video ),材质使用即可。 而气泡框展示视频也比较容易,直接展示视频

    2024年02月03日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包