色または材質のないCZMLポリゴン

Question

ポリゴンの輪郭のみを持ち、ポリゴンの辺を覆う材質を持たないCZMLポリゴンを描画することはできますか？

これは、オブジェクトがポリゴンに完全に潜んでいる、つまり内側のポリゴンの辺が外側のポリゴンの辺と重なっていないオブジェクトをクリックできるようにするために必要です。だから私はちょうどポリゴンアウトラインのクリックイベントを作るためにポリゴンのアウトラインを描画したい。

Answer 1

ありがとうございましたあなたの記述的な答えは@emackeyです。あなたの答えは、私がポリゴンのアウトラインの幅を広げたい場合に便利です。

しかし、中空ポリゴン（アウトラインのみのポリゴン）を実現する簡単な方法はhereです。 CZMLポリゴンのfillプロパティをfalseに設定してくれました。

Answer 2

正しく理解していれば、ポリゴンの内部色を完全に透明に設定して、アウトラインのみが表示またはクリックできるようにすることができます。そこで私は以下を説明します。このアプローチには欠点がありますが、まず、ここでの作業例です：

今

var czml = [{ 
    "id" : "document", 
    "name" : "CZML Geometries: Polygon", 
    "version" : "1.0" 
}, { 
    "id" : "outlinedPolygon", 
    "name" : "Outlined Polygon", 
    "polygon" : { 
     "positions" : { 
      "cartographicDegrees" : [ 
       -108.0, 25.0, 0, 
       -100.0, 25.0, 0, 
       -100.0, 30.0, 0, 
       -108.0, 30.0, 0 
      ] 
     }, 
     "material" : { 
      "solidColor" : { 
       "color" : { 
        "rgba" : [0, 0, 0, 0] 
       } 
      } 
     }, 
     "extrudedHeight" : 0, 
     "perPositionHeight" : true, 
     "outline" : true, 
     "outlineColor" : { 
      "rgba" : [255, 255, 0, 255] 
     } 
    } 
}]; 

var viewer = new Cesium.Viewer('cesiumContainer'); 
var dataSource = Cesium.CzmlDataSource.load(czml); 
viewer.dataSources.add(dataSource); 
viewer.zoomTo(dataSource); 

問題は：Windowsベースのシステムと他のWebGLの実装の多くは、ラインが正確以外の幅許可されていません1.0ピクセル。つまり、多くのシステムでポリゴンの輪郭が細くなります。

もう1つの欠点は、レンダラが多分、ポリゴンの内部からそれらの透明なフラグメントをすべて考慮して破棄し、パフォーマンスを損なう可能性があることです。

解決策は、アウトラインを描画するためにポリゴンの代わりにPolylineを使用することです。セシウムには、スクリーンスペースポリゴンとしてポリラインを描画するための特注のシステムがあり、多くのユーザーに影響を与える1ピクセルのWebGLライン制限を回避します。また、ポリラインは囲まれた領域を決して埋めることを試みません。

ポリラインで領域を完全に囲むには、最初の点を最後の点として繰り返す必要があります。ここに例があります：

var czml = [{ 
    "id" : "document", 
    "name" : "CZML Geometries: Polyline", 
    "version" : "1.0" 
}, { 
    "id" : "outlinedPolygon", 
    "name" : "Outlined Polygon", 
    "polyline" : { 
     "positions" : { 
      "cartographicDegrees" : [ 
       -108.0, 25.0, 0, 
       -100.0, 25.0, 0, 
       -100.0, 30.0, 0, 
       -108.0, 30.0, 0, 
       -108.0, 25.0, 0 
      ] 
     }, 
     "width": 5, 
     "material" : { 
      "solidColor" : { 
       "color" : { 
        "rgba" : [255, 255, 0, 255] 
       } 
      } 
     } 
    } 
}]; 

var viewer = new Cesium.Viewer('cesiumContainer'); 
var dataSource = Cesium.CzmlDataSource.load(czml); 
viewer.dataSources.add(dataSource); 
viewer.zoomTo(dataSource);