当前位置：网站首页>cesium 图形标注圆形、正方形、多边形、椭圆等
cesium 图形标注圆形、正方形、多边形、椭圆等
2022-06-25 03:44:00 【王+V】
cesium 图形标注圆形、正方形、多边形、椭圆等
这个是啥子嘞，就是向cesium上面添加圆形、正方形啥的。
官方案例
案例：https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html
中文API文档：http://cesium.xin/cesium/cn/Documentation1.62/index.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 }),
},
});
}
未完待续 ~~~~
OK，有时间了，继续学习更新~~~~
绘制三个立体球球串串
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 }),
},
});
}
绘制一道发光的线
// 绘制一道发光的线
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,
}),
},
});
绘制一个围栏吧
// 绘制围栏
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),
}),
},
});
哎哟，不知道怎么形容，绘制一个圆角矩形的大粗线
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 }),
},
});
上边那个立体了
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 }),
},
});
圆角矩形大粗线飞起来了
// 上上边的那个飞起来了
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 }),
},
});
哇，星星的柱子
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 }),
},
});
没有边框的星星的柱子
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), // 这个方法在上面有
material: Cesium.Color.fromRandom({
alpha: 1.0 }),
},
});
圆柱形的大管子
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,
},
});
完成了！太厉害了我！
边栏推荐
- Maybe it's the wrong reason
- Huawei failed to appeal and was prohibited from selling 5g equipment in Sweden; Apple regained the first place in the world in terms of market value; DeNO completes round a financing of USD 21million
- Comprehensive assignment of thesis writing instruction of Dongcai
- MySQL modifies and deletes tables in batches according to the table prefix
- AI writes its own code to let agents evolve! The big model of openai has the flavor of "human thought"
- Work assessment of Biopharmaceutics of Jilin University in March of the 22nd spring -00031
- Disassembly of Weima prospectus: the electric competition has ended and the intelligent qualifying has just begun
- Jilin University 22 spring March new development English comprehensive course (I) assignment assessment-00080
- Crawler grabs the data of Douban group
- zabbix的安装避坑指南
猜你喜欢
Now, the ear is going into the metauniverse
Russian Airi Research Institute, etc. | SEMA: prediction of antigen B cell conformation characterization using deep transfer learning
![[harmony OS] [arkui] ETS development graphics and animation drawing](/img/9d/0ac2b3d8bcdcd610767df930e2fa4e.png)
[harmony OS] [arkui] ETS development graphics and animation drawing
Interview with Mo Tianlun | ivorysql wangzhibin - ivorysql, an Oracle compatible open source database based on PostgreSQL
BGP biplane architecture
(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
“语法糖”——我的编程新知
Intel 13代酷睿首次露出真面目：68MB缓存提升明显
扎克伯格最新VR原型机来了，要让人混淆虚拟与现实的那种
马斯克被诉传销索赔2580亿美元，台积电公布2nm制程，中科院发现月壤中含有羟基形式的水，今日更多大新闻在此...
随机推荐
【Rust投稿】捋捋 Rust 中的 impl Trait 和 dyn Trait
佐喃社区
Now, the ear is going into the metauniverse
windows 2003 64位系统php运行报错：1% 不是有效的 win32 应用程序
Program. Launch (xxx) open file
MySQL modifies and deletes tables in batches according to the table prefix
严重的PHP缺陷可导致QNAP NAS 设备遭RCE攻击
Jilin University 22 spring March "official document writing" assignment assessment-00029
Two common OEE monitoring methods for equipment utilization
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
PHP代码审计2—这些函数必知必会
Intel 13代酷睿首次露出真面目：68MB缓存提升明显
一文搞懂php中的（DI）依赖注入
Apple's legendary design team disbanded after jobs refused to obey cook
冷热酸甜、想成就成？冷酸灵母公司登康口腔欲在深交所主板上市
可能是拿反了的原因
How to quickly deliver high-value software
ZABBIX installation pit avoidance Guide
Dr. Sun Jian was commemorated at the CVPR conference. The best student thesis was awarded to Tongji Ali. Lifeifei won the huangxutao Memorial Award
Winxp kernel driver debugging