大家好，我是AIC山魚！??這是我的主頁
??作為CSDN博主和前端優(yōu)質創(chuàng)作者?，我致力于為大家?guī)硇路f、脫俗且有趣的內容。
??我還創(chuàng)建了山魚社區(qū)，這是一個獨特的社區(qū)??，????為大家提供了一個交流和分享的空間。
??在山魚社區(qū)中，我推出了一個名為"松鼠計劃"的活動，這是一個不斷更新的活動，旨在將有趣、有啟發(fā)性的書籍送給社區(qū)成員已經參加活動的人。我相信通過閱讀和知識的分享，我們可以拓寬視野、激發(fā)思維，并獲得更多的啟示
總之，我是AIC山魚，一個充滿新意、與眾不同且有趣的CSDN博主和前端優(yōu)質創(chuàng)作者??
0.初識cesium
Cesium是一種用于創(chuàng)建高性能、跨平臺的3D地球可視化的開源JavaScript庫。它基于WebGL技術，可以在現代的Web瀏覽器中實現高度交互性和可視化效果的地球模型展示。
Cesium可以用于創(chuàng)建各種類型的地球可視化應用，包括地理信息系統（GIS）應用、地球科學研究、航空航天模擬等。它提供了豐富的功能和工具，使開發(fā)人員能夠在地球表面上疊加各種數據，如地形、衛(wèi)星圖像、矢量數據等，并實現交互式的瀏覽、查詢和分析。
Cesium的特點包括：
- 跨平臺：Cesium可以在多種操作系統和設備上運行，包括Windows、Mac、Linux以及各種移動設備。
- 高性能：Cesium采用了基于WebGL的渲染技術，能夠實現流暢的地球模型展示和數據可視化。
- 數據豐富：Cesium支持導入各種地球數據，如地形數據、影像數據、矢量數據等，并提供了豐富的工具和API進行數據處理和分析。
- 可擴展性：Cesium提供了靈活的插件和擴展機制，可以根據需要進行定制和擴展。
總的來說，Cesium是一個功能強大的開源庫，為開發(fā)人員提供了創(chuàng)建高性能地球可視化應用的工具和框架。
1.創(chuàng)建第一個我們的cesium項目
首先我們可以打開cesium官網
下載我們所需要的資源，來創(chuàng)建我們的第一個cesium項目（注意不要使用最新版本的截止到現在最新版本為1.108）
我們可以有兩種方式進行使用cesium，這里我就直接下載使用了
解壓后我們可以看到一堆不認識的文件夾，但是當前我們只需要用到兩個文件夾里面的內容，所以我們要把所使用到的文件挑出來，供我們使用。
1.1了解Cesium文件內容
從上向下依次了解
1.Apps文件夾
CesiumViewer：cesium示例。
SampleData：代碼數據包括但不限于項目內模型，文件，地理信息代碼。
Sandcastle：Cesium的示例程序代碼。
TimelineDemo：時間軸示例代碼。
2.Build文件夾
Cesium：Cesium庫文件（下面會用到）。
CesiumUnminified：調試文件，用于尋找錯誤。
Documentation：API文檔。
Specs：自動化單元測試文件
3.Source文件夾
所有類的源碼以及自定義的shader（渲染）
4.Specs文件夾
自動化單元測試，Cesium采用了單元測試Jasmine框架
5.ThirdParty文件夾
第三方庫：codemirror代碼編輯器、dojo是一個JavaScript工具包和框架，用于構建Web應用程序和移動應用程序。Dojo提供了豐富的功能和工具，包括DOM操作、事件處理、數據綁定、模塊化開發(fā)、動畫效果、Ajax通信等，使開發(fā)者能夠更輕松地構建復雜的交互式應用程序。jshint是JavaScript語法和風格檢查工具
1.3創(chuàng)建項目
這里我們可以新建一個文件夾，存放我們自己寫的項目，這是我的路徑，可以像我一樣，也可以自己搞，之后會用到里面的東西，只要能拿到就可以啦，然后我們在從libs同級的地方創(chuàng)建一個src來存放我們的項目
完成以上步驟之后，從src內創(chuàng)建html文件，我們從剛才的libs里面引入涼哥文件，分別是一下涼哥文件引入之后我們就可以開始我們的cesium之旅啦。
1.4創(chuàng)建我們首個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主頁
然后我們可以看到這么一個頁面，點擊AccessTokens
進入獲取token的界面，然后復制下來（可以建一個txt文件保存它）
然后直接打開我們的項目，進入到瀏覽器，首先是一個大地球和浩瀚的宇宙映入我們眼簾，其次是一些操作項
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，也就是開啟狀態(tài)）
animation:false,
// 時間軸控件（默認是true，也就是開啟狀態(tài)）
timeline:false
});
// 2.Scener，他是一個隱式類，隱式創(chuàng)建于Viewer里面，他是我們的3D實體類，我們可以通過他來創(chuàng)建/隱藏實體
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)})
//這三個數分別是經度，緯度，高度
此時我們的視口區(qū)域不再是整個地球，而是我們所設置的區(qū)域（一片田地）
// 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
// 它主要用于實體模型的加載，動效樣式的設置
// 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米)
// 靜態(tài)函數法：
var cartographic= Cesium.Cartographic.fromDegrees(longitude經度, latitude緯度,height高度)
var cartographic= Cesium.Cartographic.fromRadians(longitude孤度, latitude孤度,height高度)
WGS84坐標系和笛卡爾空間直角坐標系 (Cartesian3) 的轉換
通過經緯度或弧度進行轉換、通過度來進行轉換
let cartesian = Cesium.Cartesian3.fromRadians(lon, lat, height);
let cartesian1 = Cesium.Cartesian3.fromRadiansArray(coordinates);
let cartesian2 = Cesium.Cartesian3.fromRadiansArrayHeights(coordinates);
笛卡爾空間直角坐標系轉換為WGS84
在這我們可以看到，它打印出來的并不是經緯度坐標而是弧度坐標，所以我們要進行轉化
// 直接轉換
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);
角度，弧度互相轉換→嗖~地址文章來源：http://www.zghlxwxcb.cn/news/detail-680118.html
在包含地形，模型，等其他事物的情況下2轉3，我們可以使用 pickPosition 方法
let cartesian3 = viewer.scene.pickPosition(cartesian2);
角度，弧度互相轉換→嗖~地址
配合cesium中文網使用效果絕佳
文章來源地址http://www.zghlxwxcb.cn/news/detail-680118.html
到了這里，關于【Cesium創(chuàng)造屬于你的地球】實現地球展示、靈活進行坐標轉換、視角切換的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
