一种吸、概述
套用官網(wǎng)的介紹，CesiumJS是一個(gè)開放源代碼JavaScript庫呀非，用于創(chuàng)建具有最佳性能坚俗，精度，視覺質(zhì)量和易用性的世界一流的3D地球和地圖岸裙。
其實(shí)猖败，就是數(shù)據(jù)可視化，Cesium支持2D降允、3D地圖地形渲染恩闻，它也提供了可以托管3D切片內(nèi)容的云平臺(tái)，開發(fā)者可以自定義自己的3D數(shù)據(jù)模型數(shù)據(jù)上傳到該平臺(tái)來使用渲染剧董。
二幢尚、使用
- 去到官網(wǎng)
QQ截圖20200529104507.jpg
- 下載資源
QQ截圖20200529104650.jpg
- 資源目錄
QQ截圖20200529105228.jpg
三、簡單代碼使用
- 引入資源
我的項(xiàng)目使用了vue框架翅楼，所以在index.html引入js文件尉剩，頁面layer.vue中使用inport引入css樣式文件
// index.html
<script src="./static/gispage/Source/Cesium.js"></script>
// layer.vue
import "./utils/widgets.css"
layer.vue頁面添加一個(gè)div id為cesiumContainer
<div id="cesiumContainer"></div>
- js代碼也只需要一行就可以初始化一個(gè)地圖
this.viewer = new Cesium.Viewer('cesiumContainer');
運(yùn)行項(xiàng)目，就可以看到一個(gè)地球呈現(xiàn)
QQ截圖20200529112447.jpg
- 接下來就可以修改參數(shù)來呈現(xiàn)自己需要的效果了
this.viewer = new Cesium.Viewer('cesiumContainer', {
timeline : false, // 是否顯示時(shí)間軸
scene3DOnly : true, // 設(shè)置為true時(shí)毅臊，將僅以3D渲染每個(gè)幾何體實(shí)例以節(jié)省GPU內(nèi)存理茎。
animation : false, // 是否創(chuàng)建動(dòng)畫小器件，左下角儀表
homeButton : false, // 是否顯示Home按鈕
geocoder : false, // 是否顯示geocoder小器件，右上角查詢按鈕
navigationHelpButton : false, // 是否顯示右上角的幫助按鈕
infoBox : false, // 是否顯示信息框
fullscreenButton : false, // 是否顯示全屏按鈕
selectionIndicator : false, // 是否顯示選取指示器組件
sceneMode : Cesium.SceneMode.SCENE3D, // 初始場(chǎng)景模式
baseLayerPicker : false, // 是否顯示圖層選擇器
imageryProvider : new Cesium.UrlTemplateImageryProvider({
url : 'https://yoururl/{z}/{x}/{y}.png', // 加載基礎(chǔ)圖層
proxy : new Cesium.DefaultProxy('/proxy/')
}),//圖像圖層提供者功蜓，僅baseLayerPicker設(shè)為false有意義
});
/**
* 設(shè)置鏡頭視角， 定位經(jīng)緯度（113.2,23.1） 高度為2千公里
* heading宠蚂、pitch和roll就是鏡頭相對(duì)于xyz軸的角度
* 以下參數(shù)為向下俯視地球
*/
this.viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(113.36824706049,23.127818196783, 2000),
orientation: {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
roll : Cesium.Math.toRadians(0)
}
});
呈現(xiàn)出來的地圖就是這樣的效果式撼，如果你設(shè)置了自己的底圖服務(wù)，也就是設(shè)置了 imageryProvider 參數(shù)求厕，就可以看到自己的發(fā)布的底圖啦
QQ截圖20200529113808.jpg
三著隆、圖層疊加
addCesiumLayer(){
/**
* 疊加圖層 wms圖層
*/
this.wms = new Cesium.WebMapServiceImageryProvider({
url: '你的服務(wù)地址', // 服務(wù)地址
layers : '服務(wù)上的圖層名稱', // 圖層名稱
proxy : new Cesium.DefaultProxy("/proxy/"), // 跨域代理
parameters : {
CQL_FILTER : "COVERTYPE='室外'", // 圖層過濾條件
STYLES : "lte_enodeb_cell_gd_app", // 圖層樣式
service : 'WMS',
FORMAT : 'image/png', // 圖片格式
TRANSPARENT : true // 設(shè)置圖層背景透明，不設(shè)置默認(rèn)背景為白色
},
tileWidth : 256, // 圖層切片的寬度
tileHeight : 256 // 圖層切片的高度
});
// this.viewer.imageryLayers.addImageryProvider(this.wms);
// addImageryProvider其實(shí)就等同于下面兩行代碼
this.baseLayer = new Cesium.ImageryLayer(this.wms);
this.viewer.imageryLayers.add(this.baseLayer);
},
可以看到自己添加的圖層
微信截圖_20200529115224.png
四呀癣、圖層點(diǎn)擊
bindClick(){
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.handler.setInputAction((e) => {
// 從相機(jī)位置到世界坐標(biāo)中windowPosition處的像素創(chuàng)建光線
var ray = this.viewer.camera.getPickRay(e.position);
// 3D笛卡爾點(diǎn)
var cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
if(cartesian){
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if(cartographic){
var xy = new Cesium.Cartesian2(); // 2D笛卡爾點(diǎn)
// 相機(jī)的高度
var cameraHeight = this.viewer.camera.positionCartographic.height;
// 獲取當(dāng)前圖層的層級(jí)處于哪一級(jí)
var level = getLevel(cameraHeight);
// 是否準(zhǔn)備就緒
if(this.wms.ready){
// 計(jì)算該圖塊位置的x美浦、y坐標(biāo)
xy = this.wms.tilingScheme.positionToTileXY(cartographic, level, xy);
var promise = this.wms.pickFeatures(xy.x,xy.y,level,cartographic.longitude,cartographic.latitude);
Cesium.when(promise, function (result) {
// 這個(gè)就是當(dāng)前點(diǎn)擊圖層的數(shù)據(jù)
console.log(result[0].properties);
})
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
// 事件也可以移除
unbindClick(){
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 鼠標(biāo)事件
Cesium.ScreenSpaceEventType.LEFT_CLICK // 左鍵單擊
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK // 雙擊
Cesium.ScreenSpaceEventType.LEFT_DOWN // 左鍵按下
Cesium.ScreenSpaceEventType.LEFT_UP // 左鍵抬起
Cesium.ScreenSpaceEventType.MIDDLE_CLICK // 中鍵單擊
Cesium.ScreenSpaceEventType.MIDDLE_DOWN // 中鍵按下
Cesium.ScreenSpaceEventType.MIDDLE_UP // 中鍵抬起
Cesium.ScreenSpaceEventType.MOUSE_MOVE // 移動(dòng)
Cesium.ScreenSpaceEventType.PINCH_END // 兩指事件在觸摸面上的結(jié)束
Cesium.ScreenSpaceEventType.PINCH_MOVE // 兩指移動(dòng)
Cesium.ScreenSpaceEventType.PINCH_START // 兩指開始
Cesium.ScreenSpaceEventType.RIGHT_CLICK // 右鍵單擊
Cesium.ScreenSpaceEventType.RIGHT_DOWN // 右鍵按下
Cesium.ScreenSpaceEventType.RIGHT_UP // 右鍵抬起
Cesium.ScreenSpaceEventType.WHEEL // 滾輪
// 獲取底圖層級(jí)
let getLevel = (height) => {
if (height > 48000000) {
return 0;
} else if (height > 24000000) {
return 1;
} else if (height > 12000000) {
return 2;
} else if (height > 6000000) {
return 3;
} else if (height > 3000000) {
return 4;
} else if (height > 1500000) {
return 5;
} else if (height > 750000) {
return 6;
} else if (height > 375000) {
return 7;
} else if (height > 187500) {
return 8;
} else if (height > 93750) {
return 9;
} else if (height > 46875) {
return 10;
} else if (height > 23437.5) {
return 11;
} else if (height > 11718.75) {
return 12;
} else if (height > 5859.38) {
return 13;
} else if (height > 2929.69) {
return 14;
} else if (height > 1464.84) {
return 15;
} else if (height > 732.42) {
return 16;
} else if (height > 366.21) {
return 17;
} else {
return 18;
}
}
五、坐標(biāo)系及其之間的轉(zhuǎn)換
平面坐標(biāo)（屏幕坐標(biāo)）
var position = { x: 113, y: 45 }
// 也可以
var position = new Cesium.Cartesian2(113, 45)
// 也可以通過點(diǎn)擊地圖项栏，獲取坐標(biāo)為e.position
平面坐標(biāo)轉(zhuǎn)三維坐標(biāo)（笛卡爾空間直角坐標(biāo)系）
var pick = this.viewer.camera.getPickRay(position)
var cartesian3 = this.viewer.scene.globe.pick(pick, this.viewer.scene);
三維坐標(biāo)轉(zhuǎn)地理坐標(biāo)（WGS84）
var dl = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3)
地理坐標(biāo)轉(zhuǎn)經(jīng)緯度
var point = {
x: dl.longitude / Math.PI * 180,
y: dl.latitude / Math.PI * 180
}
經(jīng)緯度轉(zhuǎn)地理坐標(biāo)(弧度坐標(biāo)系Cartographic)
var cartographic = Cesium.Cartographic.fromDegrees(point.x,point.y)
Cesium入門幾天浦辨，還是有點(diǎn)收獲，期間雖然遇到很多問題沼沈，還是寫下來啦流酬！歡迎指正。
