基于Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標注
更新時間：2022年06月23日 08:20:53 作者：王+V
這篇文章主要介紹了如何利用Cesium實現繪制圓形、正方形、多邊形、橢圓等形狀的圖形標注，文中的示例代碼講解詳細，需要的可以參考一下
這個是啥子嘞，就是向cesium上面添加圓形、正方形啥的。
官方案例
https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html
官網寫的很好了，但是有一些沒有注釋，所以說剛入門的小可愛們不知道那些代碼分別是繪制啥的，所以說嘞，我稍微整理了一下。
繪制矩形
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([ // 繪制多邊形，經度和緯度值列表。值交替顯示[經度，緯度，經度，緯度...]。
-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, // 指定半短軸的數字屬性。
semiMajorAxis: 500000.0, // 指定半長軸的數值屬性。
rotation: Cesium.Math.toRadians(-40.0), // 一個數字屬性，指定橢圓從北方逆時針旋轉。
outline: true, // 一個布爾屬性，指定是否勾勒出橢圓。
outlineColor: Cesium.Color.WHITE, // 一個屬性，指定輪廓的 顏色
outlineWidth: 4, // 一個數字屬性，指定輪廓的寬度。
stRotation: Cesium.Math.toRadians(22), // 一個數字屬性，指定橢圓紋理從北方逆時針旋轉。
// 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, // 一個數字屬性，指定圓柱頂部的半徑。
bottomRadius: 150000.0, // 一個數字屬性，指定圓柱體底部的半徑。
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,
},
});
繪制立方體，扭轉一定角度的
// 繪制立方體，帶旋轉的
viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
38.0,
-107.0,
40.0
),
height: 700000.0, // 一個數字屬性，用于指定多邊形相對于橢球表面的高度
extrudedHeight: 100000.0, // 一個數字屬性，用于指定多邊形的凸出面相對于橢球面的高度。
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實現繪制圓形,正方形,多邊形,橢圓圖形標注的詳細內容，更多關于Cesium繪制圖形標注的資料請關注腳本之家其它相關文章！
相關文章
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細介紹了JavaScript使用ZeroClipboard操作剪切板的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
uni-app微信小程序登錄并使用vuex存儲登錄狀態(tài)的思路詳解
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲登錄態(tài)的思路，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
javascript currentTarget對象介紹...2007-10-10
這篇文章主要給大家介紹了關于前端快速獲取cookie的2種簡單方式,Cookie是在HTTP協(xié)議下,服務器或腳本可以維護客戶工作站上信息的一種方式,需要的朋友可以參考下2023-08-08
javascript Array.prototype.slice使用說明
slice 可以用來獲取數組片段，它返回新數組，不會修改原數組。2010-10-10
這篇文章主要介紹了JS實現的簡單四則運算計算器功能,涉及javascript事件響應及數值運算相關操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JS實現跟隨鼠標立體翻轉圖片的方法,涉及javascript操作圖片翻轉的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
WEB泡泡堂2.0（圖形界面+電腦對玩）(javascript)
WEB泡泡堂2.0（圖形界面+電腦對玩）(javascript)2007-01-01
使用js檢測瀏覽器是否支持html5中的video標簽的方法
這篇文章主要介紹了使用js檢測瀏覽器是否支持html5中的video標簽的方法,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了如何使用Html和JavaScript實現將Excel文件渲染在頁面上,文中的示例代碼講解詳細,有需要的小伙伴可以參考下2024-12-12