当前位置：网站首页>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 ！
边栏推荐
- 【Harmony OS】【ArkUI】ets开发 图形与动画绘制
- On the self-cultivation of an excellent red team member
- China's SkyEye found suspicious signals of extraterrestrial civilization. Musk said that the Starship began its orbital test flight in July. Netinfo office: app should not force users to agree to proc
- Mobile mall project operation
- 1.初识半音阶口琴
- Time management understood after working at home | community essay solicitation
- 俄罗斯AIRI研究院等 | SEMA：利用深度迁移学习进行抗原B细胞构象表征预测
- opencv 红色区域在哪里？
- Trading system development (IV) - trading counter system
- 可能是拿反了的原因
猜你喜欢
Amazon's other side in China
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
(ultra detailed onenet TCP protocol access) arduino+esp8266-01s accesses the Internet of things platform, uploads real-time collected data /tcp transparent transmission (and how to obtain and write Lu
Sleep more, you can lose weight. According to the latest research from the University of Chicago, sleeping more than 1 hour a day is equivalent to eating less than one fried chicken leg
Why can banana be a random number generator? Because it is the "king of radiation" in the fruit industry
Redis related-01
x86 CPU，危！最新漏洞引发热议，黑客可远程窃取密钥，英特尔“全部处理器”受影响...
opencv怎么安装？opencv下载安装教程
![[harmony OS] [ark UI] basic ETS context operations](/img/fb/a1b8463ba160e6c5aa23d671a0c245.png)
[harmony OS] [ark UI] basic ETS context operations
Development of trading system (II) -- market data
随机推荐
DevEco Studio 3.0编辑器配置技巧篇
Does it count as staying up late to sleep at 2:00 and get up at 10:00? Unless you can do it every day
About PLSQL error initialization failure
zabbix的安装避坑指南
Development of trading system (V) -- Introduction to Sinovel counter
Sleep more, you can lose weight. According to the latest research from the University of Chicago, sleeping more than 1 hour a day is equivalent to eating less than one fried chicken leg
Preparedstatement principle of preventing SQL injection
Development of trading system (III) - risk control system
Google founder brin's second marriage broke up: it was revealed that he had filed for divorce from his Chinese wife in January, and his current fortune is $631.4 billion
Jilin University 22 spring March document retrieval assignment assessment-00073
Lao Ye's blessing
【组队学习】SQL编程语言笔记——Task04
（超详细onenet TCP协议接入）arduino+esp8266-01s接入物联网平台，上传实时采集数据/TCP透传（以及lua脚本如何获取和编写
教你如何在winpe里安装win11系统
[harmony OS] [ark UI] basic ETS context operations
Work assessment of pharmaceutical polymer materials of Jilin University in March of the 22nd spring -00025
Redis related-02
IE寿终正寝，网友们搞起了真·墓碑……
程序猿职业发展9项必备软技能
ZABBIX installation pit avoidance Guide