当前位置：网站首页>Cesium graphic annotation circle, square, polygon, ellipse, etc
Cesium graphic annotation circle, square, polygon, ellipse, etc
2022-06-25 04:04:00 【Wang +v】
cesium Graphic callout circle 、 Square 、 polygon 、 Ellipses, etc
What is this , That is to say cesium Add a circle above 、 Square or something .
Official case
Case study ：https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html
chinese API file ：http://cesium.xin/cesium/cn/Documentation1.62/index.html
It's well written on the official website , But there are some without notes , So the new cute kids don't know what the code is drawn , So say , I sort it out a little bit .
Draw a rectangle
const stripeMaterial = new Cesium.StripeMaterialProperty({
evenColor: Cesium.Color.WHITE.withAlpha(0.5),
oddColor: Cesium.Color.BLUE.withAlpha(0.5),
repeat: 5.0,
});
// Draw a rectangle
let graphical = viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(116.8, 36.1, 116.9, 36.2), // Westernmost 、 Southernmost 、 Easternmost 、 The northernmost
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(45),
// material: stripeMaterial,
},
})
Draw polygon
let graphical = viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([ // Draw polygon , List of longitude and latitude values . Values are displayed alternately [ longitude , latitude , longitude , latitude ...].
-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,
},
})
Draw the ellipse
let graphical = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.8, 36.1),
ellipse: {
semiMinorAxis: 300000.0, // Specifies the numeric attribute of the semi minor axis .
semiMajorAxis: 500000.0, // Specifies the numeric attribute of the semimajor axis .
rotation: Cesium.Math.toRadians(-40.0), // A numeric attribute , Specifies that the ellipse rotates counterclockwise from the North .
outline: true, // A Boolean property , Specifies whether to outline an ellipse .
outlineColor: Cesium.Color.WHITE, // An attribute , Specifies the of the profile Color
outlineWidth: 4, // A numeric attribute , Specify the width of the profile .
stRotation: Cesium.Math.toRadians(22), // A numeric attribute , Specifies that the ellipse texture rotates counterclockwise from the North .
// material: stripeMaterial,
},
});
Draw a circle
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,
},
});
Draw a cube
// Draw a cube
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 }),
},
});
Draw an elliptical cylinder
// Draw an elliptical cylinder
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 }),
},
});
Draw a multi sided column
// Draw a multi sided column
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 }),
},
});
Draw a cylinder
// Draw a cylinder
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, // A numeric attribute , Specify the radius of the top of the cylinder .
bottomRadius: 150000.0, // A numeric attribute , Specify the radius at the bottom of the cylinder .
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
Stereoscopic string
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 }),
},
});
}
It's hard to describe Flat and three-dimensional board
// Draw what this is , Flat and three-dimensional board
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 }),
},
});
“ return ” word
// I drip my mother. , More and more difficult to describe , One “ return ” word
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,
},
});
Draw a cube , Twist a certain angle
// Draw a cube , With rotation
viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
38.0,
-107.0,
40.0
),
height: 700000.0, // A numeric attribute , Used to specify the height of the polygon relative to the ellipsoid surface
extrudedHeight: 100000.0, // A numeric attribute , Used to specify the height of the convex surface of the polygon relative to the ellipsoid .
rotation: Cesium.Math.toRadians(45),
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
An elliptical cylinder floating in the sky
// An elliptical cylinder floating in the sky
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 }),
},
});
Drawing vertebrae
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 }),
},
});
The string of plane figures
// The string of plane figures
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 }),
},
});
}
To be continued ~~~~
OK, There's time , Keep learning and updating ~~~~
Draw three solid balls in series
for (let i = 0; i < 5; ++i) {
let height = 100000.0 + 200000.0 * i;
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-108.0, 45.0, height),
box: {
dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-104.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-100.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
}
Draw a luminous line
// Draw a luminous line
let positions = [];
for (let i = 0; i < 40; ++i) {
positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 15.0));
}
viewer.entities.add({
polyline: {
positions: positions,
width: 10.0,
material: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.DEEPSKYBLUE,
glowPower: 0.25,
}),
},
});
Draw a fence
// Draw the fence
viewer.entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
43.0,
100000.0,
-87.5,
45.0,
100000.0,
-85.0,
43.0,
100000.0,
-87.5,
41.0,
100000.0,
-90.0,
43.0,
100000.0,
]),
material: new Cesium.CheckerboardMaterialProperty({
repeat: new Cesium.Cartesian2(20.0, 6.0),
}),
},
});
Ouch , I don't know how to describe , Draw a thick line with rounded rectangle
viewer.entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-125.0,
50.0,
-125.0,
55.0,
]),
width: 100000,
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
The three-dimensional one above
viewer.entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-125.0,
50.0,
-125.0,
55.0,
]),
width: 100000,
height: 300000,
extrudedHeight: 400000,
material: Cesium.Color.fromRandom({
alpha: 0.7 }),
},
});
Big thick lines of rounded rectangle fly up
// The one on the top flies
viewer.entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-125.0,
50.0,
-125.0,
55.0,
]),
width: 100000,
height: 700000,
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: Cesium.Color.fromRandom({
alpha: 0.7 }),
},
});
wow , Pillars of stars
function starPositions(arms, rOuter, rInner) {
const angle = Math.PI / arms;
const pos = [];
for (let i = 0; i < 2 * arms; i++) {
const r = i % 2 === 0 ? rOuter : rInner;
const p = new Cesium.Cartesian2(
Math.cos(i * angle) * r,
Math.sin(i * angle) * r
);
pos.push(p);
}
return pos;
}
viewer.entities.add({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-102.0,
15.0,
100000.0,
-105.0,
20.0,
200000.0,
-110.0,
20.0,
100000.0,
]),
shape: starPositions(7, 30000.0, 20000.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 1,
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
A column of stars without borders
viewer.entities.add({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-102.0,
15.0,
-105.0,
20.0,
-110.0,
20.0,
]),
shape: starPositions(7, 30000.0, 20000.0), // This method has
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
A large cylindrical tube
function computeCircle(radius) {
const positions = [];
for (let i = 0; i < 360; i++) {
const radians = Cesium.Math.toRadians(i);
positions.push(
new Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
viewer.entities.add({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-104.0,
13.0,
-107.0,
18.0,
-112.0,
18.0,
]),
shape: computeCircle(40000.0),
material: Cesium.Color.WHITE,
},
});
It's done ！ That's great. I ！
边栏推荐
- 教你如何在winpe里安装win11系统
- Jilin University 22 spring March "official document writing" assignment assessment-00034
- How to use ide to automatically sign and debug Hongmeng application
- Development of trading system (XII) - Official quickfix document
- 你真的需要自动化测试吗？
- [rust submission] review impl trail and dyn trail in rust
- AI quantitative transaction (I) -- Introduction to quantitative transaction
- The programmer reality show is coming again! Hulan, as the host, carried the lamp to fill the knowledge. The SSS boss had a bachelor's degree in pharmacy. Zhu Jun and Zhang Min from Tsinghua joined th
- 长沙“求才”：“下力气”与“出实招”并进，“快发展”和“慢生活”兼得
- Monitoring pancakeswap new token
猜你喜欢
cesium 图形标注圆形、正方形、多边形、椭圆等
![[harmony OS] [ark UI] basic ETS context operations](/img/fb/a1b8463ba160e6c5aa23d671a0c245.png)
[harmony OS] [ark UI] basic ETS context operations
JSP cannot be resolved to a type error reporting solution
冷热酸甜、想成就成？冷酸灵母公司登康口腔欲在深交所主板上市
Disassembly of Weima prospectus: the electric competition has ended and the intelligent qualifying has just begun
墨天轮访谈 | IvorySQL王志斌—IvorySQL，一个基于PostgreSQL的兼容Oracle的开源数据库
About PLSQL error initialization failure
Serious PHP defects can lead to rce attacks on QNAP NAS devices
俄罗斯AIRI研究院等 | SEMA：利用深度迁移学习进行抗原B细胞构象表征预测
你真的需要自动化测试吗？
随机推荐
Crawler grabs the data of Douban group
AI writes its own code to let agents evolve! The big model of openai has the flavor of "human thought"
Jilin University 22 spring March document retrieval assignment assessment-00073
zabbix的安装避坑指南
Mobile mall project operation
uniapp 制作手机app程序， 使用uni.chooseVideo录制视频，视频播放模糊分辨率低的原因
Tai Chi graphics 60 lines of code to achieve classic papers, 0.7 seconds to get Poisson disk sampling, 100 times faster than numpy
[harmony OS] [arkui] ETS development graphics and animation drawing
“语法糖”——我的编程新知
The era of copilot free is over! The official version is 67 yuan / month, and the student party and the defenders of popular open source projects can prostitute for nothing
Lu Qi invests in quantum computing for the first time
代錶多樣性的彩色 NFT 系列上線 The Sandbox 市場平臺
（超详细onenet TCP协议接入）arduino+esp8266-01s接入物联网平台，上传实时采集数据/TCP透传（以及lua脚本如何获取和编写
程序猿职业发展9项必备软技能
DevEco Studio 3.0编辑器配置技巧篇
1.初识半音阶口琴
About PLSQL error initialization failure
2D 照片变身 3D 模型，来看英伟达的 AI 新“魔法”！
练习：仿真模拟福彩双色球——中500w巨奖到底有多难？跑跑代码就晓得了。
Work assessment of Biopharmaceutics of Jilin University in March of the 22nd spring -00005