基于Cesium實現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
這個是啥子嘞,就是向cesium上面添加圓形、正方形啥的。
官方案例
https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html
官網(wǎng)寫的很好了,但是有一些沒有注釋,所以說剛?cè)腴T的小可愛們不知道那些代碼分別是繪制啥的,所以說嘞,我稍微整理了一下。
繪制矩形
const stripeMaterial = new Cesium.StripeMaterialProperty({ evenColor: Cesium.Color.WHITE.withAlpha(0.5), oddColor: Cesium.Color.BLUE.withAlpha(0.5), repeat: 5.0, }); // 繪制矩形 let graphical = viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees(116.8, 36.1, 116.9, 36.2), // 最西、最南、最東、最北 outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, stRotation: Cesium.Math.toRadians(45), // material: stripeMaterial, }, })
繪制多邊形
let graphical = viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ // 繪制多邊形,經(jīng)度和緯度值列表。值交替顯示[經(jīng)度,緯度,經(jīng)度,緯度...]。 -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0, ]) ), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, // material: stripeMaterial, }, })
繪制橢圓
let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.8, 36.1), ellipse: { semiMinorAxis: 300000.0, // 指定半短軸的數(shù)字屬性。 semiMajorAxis: 500000.0, // 指定半長軸的數(shù)值屬性。 rotation: Cesium.Math.toRadians(-40.0), // 一個數(shù)字屬性,指定橢圓從北方逆時針旋轉(zhuǎn)。 outline: true, // 一個布爾屬性,指定是否勾勒出橢圓。 outlineColor: Cesium.Color.WHITE, // 一個屬性,指定輪廓的 顏色 outlineWidth: 4, // 一個數(shù)字屬性,指定輪廓的寬度。 stRotation: Cesium.Math.toRadians(22), // 一個數(shù)字屬性,指定橢圓紋理從北方逆時針旋轉(zhuǎn)。 // material: stripeMaterial, }, });
繪制圓形
let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0), ellipse: { semiMinorAxis: 250000.0, semiMajorAxis: 250000.0, rotation: Cesium.Math.toRadians(-40.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, stRotation: Cesium.Math.toRadians(90), // material: stripeMaterial, }, });
繪制立方體
// 繪制立方體 let graphical = viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -118.0, 38.0, -116.0, 40.0 ), extrudedHeight: 500000.0, outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, stRotation: Cesium.Math.toRadians(45), material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
繪制橢圓柱體
// 繪制橢圓柱體 let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0), ellipse: { semiMinorAxis: 100000.0, semiMajorAxis: 200000.0, height: 100000.0, extrudedHeight: 200000.0, rotation: Cesium.Math.toRadians(90.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
繪制多邊柱體
// 繪制多邊柱體 let graphical = viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0, ]) ), height: 300000.0, extrudedHeight: 700000.0, outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
繪制圓柱體
// 繪制圓柱體 let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0), cylinder: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0, ]) ), length: 200000.0, topRadius: 150000.0, // 一個數(shù)字屬性,指定圓柱頂部的半徑。 bottomRadius: 150000.0, // 一個數(shù)字屬性,指定圓柱體底部的半徑。 outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
立體串串
for (i = 0; i < 5; ++i) { let = height = 100000.0 + 200000.0 * i; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height), box: { dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height), ellipsoid: { radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height), ellipsoid: { radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); }
好難形容 又平面又立體的板板
// 繪制啥這是,又平面又立體的板板 viewer.entities.add({ wall: { positions: Cesium.Cartesian3.fromDegreesArray([ -95.0, 50.0, -85.0, 50.0, -75.0, 50.0, ]), maximumHeights: [500000, 1000000, 500000], minimumHeights: [0, 500000, 0], outline: true, outlineColor: Cesium.Color.LIGHTGRAY, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 0.7 }), }, });
“回”字
// 我滴媽呀,越來越難形容,一個“回”字 viewer.entities.add({ polygon: { hierarchy: { positions: Cesium.Cartesian3.fromDegreesArray([ -109.0, 30.0, -95.0, 30.0, -95.0, 40.0, -109.0, 40.0, ]), holes: [ { positions: Cesium.Cartesian3.fromDegreesArray([ -107.0, 31.0, -107.0, 39.0, -97.0, 39.0, -97.0, 31.0, ]), holes: [ { positions: Cesium.Cartesian3.fromDegreesArray([ -105.0, 33.0, -99.0, 33.0, -99.0, 37.0, -105.0, 37.0, ]), holes: [ { positions: Cesium.Cartesian3.fromDegreesArray([ -103.0, 34.0, -101.0, 34.0, -101.0, 36.0, -103.0, 36.0, ]), }, ], }, ], }, ], }, // material: stripeMaterial, }, });
繪制立方體,扭轉(zhuǎn)一定角度的
// 繪制立方體,帶旋轉(zhuǎn)的 viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -110.0, 38.0, -107.0, 40.0 ), height: 700000.0, // 一個數(shù)字屬性,用于指定多邊形相對于橢球表面的高度 extrudedHeight: 100000.0, // 一個數(shù)字屬性,用于指定多邊形的凸出面相對于橢球面的高度。 rotation: Cesium.Math.toRadians(45), material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
在天上飄著的橢圓柱體
// 在天上飄著的橢圓柱體 viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0), ellipse: { semiMinorAxis: 100000.0, semiMajorAxis: 200000.0, height: 300000.0, extrudedHeight: 700000.0, rotation: Cesium.Math.toRadians(-40.0), material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
繪制椎體
viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0), cylinder: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0, ]) ), length: 400000.0, topRadius: 0.0, bottomRadius: 200000.0, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });
平面圖形的串串
// 平面圖形的串串 for (i = 0; i < 5; ++i) { let height = 200000.0 * i; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0), ellipse: { semiMinorAxis: 200000.0, semiMajorAxis: 200000.0, height: height, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -67.0, 27.0, -63.0, 32.0 ), height: height, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); }
以上就是基于Cesium實現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注的詳細內(nèi)容,更多關(guān)于Cesium繪制圖形標(biāo)注的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于javascript模塊加載技術(shù)的一些思考
這篇文章主要介紹了關(guān)于javascript模塊加載技術(shù)的一些思考 ,需要的朋友可以參考下2014-11-11js調(diào)用AJAX時Get和post的亂碼解決方法
在使用"get"時,抓取的頁面最后加上編碼類型,在使用post時用vbscript解決了編碼問題,具體實現(xiàn)如下,有類似情況的朋友可以參考下哈2013-06-06JavaScript事件Event對象詳解(屬性、方法、自定義事件)
Event對象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài),這篇文章主要給大家介紹了關(guān)于JavaScript事件Event對象(屬性、方法、自定義事件)的相關(guān)資料,需要的朋友可以參考下2024-01-01