當(dāng)前位置：首頁 >

Cesium学习四：使用entity绘制polygon

發(fā)布時間：2023/12/15 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 Cesium学习四：使用entity绘制polygon 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、多邊形繪制代碼

上一篇介紹了線的繪制，本篇介紹多邊形的繪制，具體代碼如下（別忘了使用你自己的Token，基礎(chǔ)環(huán)境不知道怎么布置的請參考開發(fā)環(huán)境搭建），繪制的結(jié)果如下圖所示。

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> </head> <body><div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></div><script>// Your access token can be found at: https://cesium.com/ion/tokens.// Replace `your_access_token` with your Cesium ion access token.Cesium.Ion.defaultAccessToken = '你的Token; //替換成你的TokenCesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.const viewer = new Cesium.Viewer('cesiumContainer', {geocoder:true,//控制右上角第一個位置的查找工具homeButton:true,//控制右上角第二個位置的home圖標(biāo)sceneModePicker:true,//控制右上角第三個位置的選擇視角模式，2d，3dbaseLayerPicker:true,//控制右上角第四個位置的圖層選擇器navigationHelpButton:true,//控制右上角第五個位置的導(dǎo)航幫助按鈕animation:false,//控制左下角的動畫器件timeline:false,//控制下方時間線fullscreenButton:false,//右下角全屏按鈕vrButton:false,//右下角vr按鈕shouldAnimate: true,//允許動畫同步infoBox : true, //不顯示點(diǎn)擊要素之后顯示的信息terrainProvider: Cesium.createWorldTerrain()});viewer._cesiumWidget._creditContainer.style.display="none";//取消版權(quán)信息let polygon_height = viewer.entities.add({name: "polygon_height",polygon: {show: true,hierarchy: Cesium.Cartesian3.fromDegreesArray([110.0,30.0,120.0,30.0,115.0,40.0,]),height: 100000,material: Cesium.Color.CYAN.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.BLACK,}})// let polygon_clamp_to_ground = viewer.entities.add({// name: "polygon_clamp_to_ground",// polygon: {// show: true,// hierarchy: Cesium.Cartesian3.fromDegreesArray([// 110.0,// 30.0,// 120.0,// 30.0,// 115.0,// 40.0,// ]),// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// material: Cesium.Color.CYAN.withAlpha(0.5),// outline: true,// outlineColor: Cesium.Color.BLACK,// }// })// let polygon_height_and_extruded_height = viewer.entities.add({// name: "polygon_height_and_extruded_height",// polygon: {// show: true,// hierarchy: Cesium.Cartesian3.fromDegreesArray([// 110.0,// 30.0,// 120.0,// 30.0,// 115.0,// 40.0,// ]),// height: 50000,// extrudedHeight: 100000,// // fill: false,// fill: true,// // material: Cesium.Color.CYAN.withAlpha(0.5),// material: Cesium.Color.CYAN,// outline: true,// outlineColor: Cesium.Color.BLACK,// outlineWidth: 5.0,// // closeTop: false,// // closeBottom: false,// }// })// let polygon_extruded_height = viewer.entities.add({// name: "polygon_extruded_height",// polygon: {// show: true,// hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([// 110.0,// 30.0,// 100000,// 120.0,// 30.0,// 100000,// 115.0,// 40.0,// 300000,// ]),// // height: 50000,// extrudedHeight: -50000,// // fill: false,// material: Cesium.Color.CYAN.withAlpha(0.5),// // material: Cesium.Color.CYAN,// outline: true,// outlineColor: Cesium.Color.RED,// outlineWidth: 5.0,// perPositionHeight: true,// }// })// let polygon_per_position_height = viewer.entities.add({// name: "polygon_per_position_height",// polygon: {// show: true,// hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([// 110.0,// 41.0,// 0.0,// 115.0,// 41.0,// 500000.0,// 120.0,// 41.0,// 0.0,// ]),// perPositionHeight: true,// // perPositionHeight: false,// material: Cesium.Color.CYAN.withAlpha(0.5),// outline: true,// outlineColor: Cesium.Color.BLACK,// outlineWidth: 10.0// }// })// let polygon_extruded_height_close_top = viewer.entities.add({// name: "polygon_extruded_height_close_top",// polygon: {// show: true,// hierarchy: Cesium.Cartesian3.fromDegreesArray([// 110.0,// 30.0,// 120.0,// 30.0,// 115.0,// 40.0,// ]),// height: 50000,// extrudedHeight: 100000,// material: Cesium.Color.CYAN,// outline: true,// // outlineColor: Cesium.Color.RED,// outlineWidth: 5.0,// closeTop: false,// closeBottom: false,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0)// }// })viewer.flyTo(viewer.entities);</script> </body> </html>

二、圖解參數(shù)

2.1 name

polygon的名稱，在鼠標(biāo)點(diǎn)擊點(diǎn)彈出的infoBox中會顯示該名稱。

2.2 polygon

多邊形的繪制參數(shù)

2.2.1 show

是否顯示，true為顯示，false為不顯示，默認(rèn)為顯示

2.2.2 hierarchy

多邊形的坐標(biāo)，為笛卡爾坐標(biāo)系的地心坐標(biāo)，可以有兩種形式

一種是帶高程值的，如Cesium.Cartesian3.fromDegreesArrayHeights([第1個點(diǎn)的經(jīng)緯度高程, 第2個點(diǎn)的經(jīng)緯度高程, ...]) ，如果想要高程值起作用，需設(shè)置perPositionHeight: true

另一種是不帶高程的，只有經(jīng)緯度，如Cesium.Cartesian3.fromDegreesArrayHeights([第1個點(diǎn)的經(jīng)緯度, 第2個點(diǎn)的經(jīng)緯度, ...])，此時的高程默認(rèn)為0，可配合heightReference: Cesium.HeightReference.CLAMP_TO_GROUND參數(shù)讓多邊形貼地

2.2.3 height

多邊形的高程，單位米，即便hierarchy設(shè)置了高程，只要perPositionHeight: false，多邊形都會以height作為高程值，默認(rèn)值為0，下圖為設(shè)置了height: 100000的效果

2.2.4 heightReference

多邊形的高程參考面，默認(rèn)值為Cesium.HeightReference.NONE，表示使用絕對高程，如果想要多邊形貼在地表，可設(shè)置為Cesium.HeightReference.CLAMP_TO_GROUND，下圖為貼地的效果

2.2.5 extrudedHeight

多邊形的外擴(kuò)高程，默認(rèn)值為0，當(dāng)值不為0時，可形成多邊形棱柱，即polygon可用來繪制幾何體
下圖為height: 50000，extrudedHeight: 100000的效果，可以把height理解為棱柱的底面高程，extrudedHeight理解為頂面高程

配合hierarchy的高程和perPositionHeight，并取消height，可繪制頂面或底面傾斜的棱柱，如下圖所示

2.2.6 material

多邊形的樣式，顏色也是其中的一種，目前可以先把這個參數(shù)當(dāng)作設(shè)置顏色用，默認(rèn)為白色，如上圖中的多邊形的顏色為青色，對應(yīng)的值為Cesium.Color.CYAN，也可以使用RGBA的格式（A表示透明度），如紅色可用new Cesium.Color(1, 0, 0, 1)表示（rgb的取值為0-1，如果是0-255的可以除以255進(jìn)行歸一化）。
下圖展示了半透明（A=0.5）顏色的顯示效果，對應(yīng)的值為new Cesium.Color(0, 0, 1, 0.5)

2.2.7 outline

是否顯示多邊形的邊框，true為顯示，false為不顯示，默認(rèn)為顯示，下圖為默認(rèn)不顯示邊框的效果

2.2.8 outlineColor

多邊形邊框的顏色，默認(rèn)為黑色，值的格式同material，下圖為outlineColor: Cesium.Color.RED的顯示效果

2.2.9 outlineWidth

多邊形邊框的寬度，此參數(shù)我修改后不起作用，原因還未搞清楚

2.2.10 perPositionHeight

多邊形高程是否使用hierarchy中每個點(diǎn)的高程，true為使用，false為不使用，默認(rèn)為不使用。使用該參數(shù)，我們可以自定義由不同高程的點(diǎn)構(gòu)成的多邊形，如下圖我們可構(gòu)建垂直地表的多邊形

2.2.11 closeTop

在使用extrudedHeight形成棱柱時，頂面是否顯示，true為顯示，false為不顯示，默認(rèn)為true，下圖為false的效果，可見頂面未顯示

2.2.12 closeBottom

在使用extrudedHeight形成棱柱時，底面是否顯示，true為顯示，false為不顯示，默認(rèn)為true，下圖為false的效果，可見底面未顯示

2.2.13 distanceDisplayCondition

多邊形在該視角距離內(nèi)可見，其他距離不可見，默認(rèn)為空，即一直可見。如new Cesium.DistanceDisplayCondition(100.0, 2000000.0)表示在視角離多邊形的距離為100到2000000之間時可看到該多邊形，其他距離不顯示該多邊形，這個參數(shù)可用來實(shí)現(xiàn)類似百度地圖那種不同縮放顯示不同內(nèi)容的功能

總結(jié)

以上是生活随笔為你收集整理的Cesium学习四：使用entity绘制polygon的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：万代南梦宫假面骑士时尚品牌HENSHIN
下一篇：网络异常处理，ping测试报：一般故障