搜尋

首頁  >  問答  >  主體

指南:如何在CZML文件中設定橢球體的色彩?

<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": 真, "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": 真, "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": 真, "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": 真, "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": 真, "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>SolidColorMaterial</code> 頁面、<code>SolidColorMaterial</code> 頁面、< ; 頁面,以及可選的<code>RgbaValue</code> 頁面。它的格式是一個GitHub wiki,每個專案都有一個頁面,不幸的是,大部分文件專案都隱藏起來,直到你點擊「顯示128個更多頁面」。 </p>
P粉162773626P粉162773626453 天前535

全部回覆(1)我來回復

  • P粉009828788

    P粉0098287882023-09-04 09:31:17

    問題在於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);
    
    

    回覆
    0
  • 取消回覆