指南：如何在CZML文档中设定椭球体的色彩？
P粉162773626
2023-09-04 00:02:30
<p>如何在CZML中指定椭球的颜色？当我在JavaScript中向查看器添加实体时，以下代码片段有效：</p>
<pre class="brush:php;toolbar:false;">let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
"ellipsoid": {
"radii": new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
"material": Cesium.Color.RED.withAlpha(0.5),
"outline": true,
"outlineColor": Cesium.Color.BLACK
}
});</pre>
<p>这个代码片段也有效：</p>
<pre class="brush:php;toolbar:false;">let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": Cesium.Color.RED.withAlpha(0.5),
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>但是这个代码片段无效（返回默认的白色椭球）：</p>
<pre class="brush:php;toolbar:false;">let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": {
"solidColor": {
"color": {
"rgba": [1, 0, 0, 0.5]
}
}
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>这个代码片段也无效（返回默认的白色椭球）：</p>
<pre class="brush:php;toolbar:false;">let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": {
"color": {
red: 1,
green: 0,
blue: 0,
alpha: 0.5
}
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>这个代码片段也无效（返回默认的白色椭球）：</p>
<pre class="brush:php;toolbar:false;">let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": {
red: 1,
green: 0,
blue: 0,
alpha: 0.5
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>我感到困惑，因为在Cesium加载后将 <code>Cesium.Color.RED.withAlpha(0.5)</code> 输入控制台会返回 <code>ne {red: 1, green: 0, blue: 0, alpha: 0.5}</code>。人们会期望给定静态成员指定的对象会起作用...</p>
<p>这是 <code>"material"</code> 的类型。由于它是一个没有属性的抽象类，我是否无法通过CZML指定它？如果设置椭球的颜色只能通过后处理来完成，那将是非常麻烦的，因为我希望能够离线进行大量的处理，然后只需在浏览器中加载CZML。</p>
<p>编辑：CZML文档很难找到和导航，但直接的答案都在那里：</p>
<p>请参阅CZML文档的 <code>Ellipsoid</code> 页面、<code>Material</code> 页面、<code>SolidColorMaterial</code> 页面、<code>Color</code> 页面，以及可选的 <code>RgbaValue</code> 页面。它的格式是一个GitHub wiki，每个项目都有一个页面，不幸的是，大部分文档项目都隐藏起来，直到你点击“显示128个更多页面”。</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
问题在于EntityCollection.add(...)接受的Entity.ConstructorOptions与CZML在某些方面是相似的，但又有一些明显的不同。你在问题中的前几个工作代码片段正确地使用了ConstructorOptions，但它们的处理颜色和位置的方式与CZML并不完全相同。
要将代码转换为原始的CZML格式，可以在CZML内容上使用
CzmlDataSource.load(...)。例如：Sandcastle实时演示const czml = [ { id: "document", version: "1.0", }, { "id": "red ellipsoid", "name": "red ellipsoid", "position": { "cartesian": [ -2083516.9683773473, -4679655.730028949, 4270821.855106338 ] }, "ellipsoid": { "radii": { "cartesian": [ 200000, 200000, 300000 ] }, "material": { "solidColor": { "color": { "rgba": [255, 0, 0, 128] } } }, "outline": true, "outlineColor": { red: 0, green: 0, blue: 0, alpha: 1 } } }, ]; const viewer = new Cesium.Viewer("cesiumContainer"); const dataSourcePromise = Cesium.CzmlDataSource.load(czml); viewer.dataSources.add(dataSourcePromise); viewer.zoomTo(dataSourcePromise);