基于Cesium實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
更新時(shí)間：2022年06月23日 08:20:53 作者：王+V
這篇文章主要介紹了如何利用Cesium實(shí)現(xiàn)繪制圓形、正方形、多邊形、橢圓等形狀的圖形標(biāo)注，文中的示例代碼講解詳細(xì)，需要的可以參考一下
這個(gè)是啥子嘞，就是向cesium上面添加圓形、正方形啥的。
官方案例
https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html
官網(wǎng)寫(xiě)的很好了，但是有一些沒(méi)有注釋?zhuān)哉f(shuō)剛?cè)腴T(mén)的小可愛(à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-11
js中的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-05
js實(shí)現(xiàn)帶有動(dòng)畫(huà)的返回頂部
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶有動(dòng)畫(huà)的返回頂部，文中示例代碼介紹的非常詳細(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-09
js調(diào)用AJAX時(shí)Get和post的亂碼解決方法
在使用"get"時(shí)，抓取的頁(yè)面最后加上編碼類(lèi)型，在使用post時(shí)用vbscript解決了編碼問(wèn)題，具體實(shí)現(xiàn)如下，有類(lèi)似情況的朋友可以參考下哈2013-06-06
兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類(lèi)代碼
近期在寫(xiě)一個(gè)博客管理后臺(tái)的前端,涉及在同一頁(yè)面兩種高亮顯示當(dāng)前菜單的需求.2010-06-06
JavaScript事件Event對(duì)象詳解(屬性、方法、自定義事件)
Event對(duì)象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤(pán)按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài),這篇文章主要給大家介紹了關(guān)于JavaScript事件Event對(duì)象(屬性、方法、自定義事件)的相關(guān)資料,需要的朋友可以參考下2024-01-01
js簡(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
有些時(shí)候我們的web程序需要利用cookie來(lái)實(shí)現(xiàn)一些功能,很多時(shí)候我們并不需要非得用服務(wù)端來(lái)操作cookie,因?yàn)閖s可以也操作cookie.2009-08-08