指南:如何在CZML文件中設(shè)定橢球體的色彩?
P粉162773626
2023-09-04 00:02:30
<p>如何在CZML中指定橢球的顏色?當(dāng)我在JavaScript中為檢視器新增實(shí)體時(shí),以下程式碼片段有效:</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": 真,
"outlineColor": Cesium.Color.BLACK
}
});</pre>
<p>這個(gè)程式碼片段也有效:</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": 真,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>但是這個(gè)程式碼片段無(wú)效(傳回預(yù)設(shè)的白色橢球):</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": 真,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>這個(gè)程式碼片段也無(wú)效(傳回預(yù)設(shè)的白色橢球):</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": 真,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>這個(gè)程式碼片段也無(wú)效(傳回預(yù)設(shè)的白色橢球):</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": 真,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});</pre>
<p>我感到困惑,因?yàn)樵贑esium加載後將<code>Cesium.Color.RED.withAlpha(0.5)</code> 輸入控制臺(tái)會(huì)返回<code>ne?{red: 1, green: 0, blue: 0, alpha: 0.5}</code>。人們會(huì)期望給定靜態(tài)成員指定的物件會(huì)起作用...</p>
<p>這是 <code>"material"</code> 的類型。由於它是一個(gè)沒(méi)有屬性的抽象類,我是否無(wú)法透過(guò)CZML指定它?如果設(shè)定橢球的顏色只能透過(guò)後處理來(lái)完成,那將是非常麻煩的,因?yàn)槲蚁M軌螂x線進(jìn)行大量的處理,然後只需在瀏覽器中載入CZML。 </p>
<p>編輯:CZML文件很難找到和導(dǎo)航,但直接的答案都在那裡:</p>
<p>請(qǐng)參閱CZML文件的<code>Ellipsoid</code> 頁(yè)面、<code>Material</code> 頁(yè)面、<code>SolidColorMaterial</code> 頁(yè)面、<code>SolidColorMaterial</code> 頁(yè)面、<code>SolidColorMaterial</code> 頁(yè)面、< ; 頁(yè)面,以及可選的<code>RgbaValue</code> 頁(yè)面。它的格式是一個(gè)GitHub wiki,每個(gè)專案都有一個(gè)頁(yè)面,不幸的是,大部分文件專案都隱藏起來(lái),直到你點(diǎn)擊「顯示128個(gè)更多頁(yè)面」。 </p>
問(wèn)題在於EntityCollection.add(...)接受的Entity.ConstructorOptions與CZML在某些方面是相似的,但又有一些明顯的不同。你在問(wèn)題中的前幾個(gè)工作程式碼片段正確地使用了ConstructorOptions,但它們的處理顏色和位置的方式與CZML並不完全相同。
要將程式碼轉(zhuǎn)換為原始的CZML格式,可以在CZML內(nèi)容上使用CzmlDataSource.load(...)
。例如:Sandcastle即時(shí)演示
#
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);
點(diǎn)贊 +0
P粉162773626