基于Cesium實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
這個(gè)是啥子嘞,就是向cesium上面添加圓形、正方形啥的。
官方案例
https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html
官網(wǎng)寫的很好了,但是有一些沒(méi)有注釋,所以說(shuō)剛?cè)腴T的小可愛(ài)們不知道那些代碼分別是繪制啥的,所以說(shuō)嘞,我稍微整理了一下。
繪制矩形
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, // 指定半長(zhǎng)軸的數(shù)值屬性。 rotation: Cesium.Math.toRadians(-40.0), // 一個(gè)數(shù)字屬性,指定橢圓從北方逆時(shí)針旋轉(zhuǎn)。 outline: true, // 一個(gè)布爾屬性,指定是否勾勒出橢圓。 outlineColor: Cesium.Color.WHITE, // 一個(gè)屬性,指定輪廓的 顏色 outlineWidth: 4, // 一個(gè)數(shù)字屬性,指定輪廓的寬度。 stRotation: Cesium.Math.toRadians(22), // 一個(gè)數(shù)字屬性,指定橢圓紋理從北方逆時(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, // 一個(gè)數(shù)字屬性,指定圓柱頂部的半徑。 bottomRadius: 150000.0, // 一個(gè)數(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 }), }, });
“回”字
// 我滴媽呀,越來(lái)越難形容,一個(gè)“回”字 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, // 一個(gè)數(shù)字屬性,用于指定多邊形相對(duì)于橢球表面的高度 extrudedHeight: 100000.0, // 一個(gè)數(shù)字屬性,用于指定多邊形的凸出面相對(duì)于橢球面的高度。 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實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注的詳細(xì)內(nèi)容,更多關(guān)于Cesium繪制圖形標(biāo)注的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于javascript模塊加載技術(shù)的一些思考
這篇文章主要介紹了關(guān)于javascript模塊加載技術(shù)的一些思考 ,需要的朋友可以參考下2014-11-11js中的for如何實(shí)現(xiàn)foreach中的遍歷
js中沒(méi)有foreach這個(gè)關(guān)鍵字,但是可以用var v in array來(lái)實(shí)現(xiàn)遍歷,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-05-05js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08解決layer 動(dòng)態(tài)加載select 失效的問(wèn)題
今天小編就為大家分享一篇解決layer 動(dòng)態(tài)加載select 失效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js調(diào)用AJAX時(shí)Get和post的亂碼解決方法
在使用"get"時(shí),抓取的頁(yè)面最后加上編碼類型,在使用post時(shí)用vbscript解決了編碼問(wèn)題,具體實(shí)現(xiàn)如下,有類似情況的朋友可以參考下哈2013-06-06兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類代碼
近期在寫一個(gè)博客管理后臺(tái)的前端,涉及在同一頁(yè)面兩種高亮顯示當(dāng)前菜單的需求.2010-06-06JavaScript事件Event對(duì)象詳解(屬性、方法、自定義事件)
Event對(duì)象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài),這篇文章主要給大家介紹了關(guān)于JavaScript事件Event對(duì)象(屬性、方法、自定義事件)的相關(guān)資料,需要的朋友可以參考下2024-01-01js簡(jiǎn)單遍歷獲取對(duì)象中的屬性值的方法示例
這篇文章主要介紹了js簡(jiǎn)單遍歷獲取對(duì)象中的屬性值的方法,涉及javascript使用for循環(huán)遍歷json對(duì)象屬性值的簡(jiǎn)單操作技巧,需要的朋友可以參考下2019-06-06解決layer.msg 不居中 ifram中的問(wèn)題
今天小編就為大家分享一篇解決layer.msg 不居中 ifram中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09