沒有顏色或材質的CZML多邊形

Question

是否可以繪製只有多邊形輪廓且沒有材質的CZML多邊形來覆蓋多邊形的邊？

這是必需的，因爲我的要求是允許單擊完全浸沒在多邊形中的對象，即內部多邊形的任何一側都不與外側多邊形的邊重疊。所以我只想繪製一個多邊形輪廓以使內部多邊形監聽點擊事件。

Answer 1

非常感謝@emackey您的描述性答案。您的答案對於我想增加多邊形輪廓的寬度非常有用。

但是實現空心多邊形（只有輪廓的多邊形）的更簡單的方法是here。設置fill CZML多邊形屬性爲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像素。這意味着你的多邊形在很多系統上總是會有一個細的輪廓。

另一個缺點是渲染器可能會考慮然後丟棄多邊形內部的所有透明片段，這可能會損害性能。

解決方法是使用Polyline而不是多邊形繪製輪廓。 Cesium有一個定製系統，用於將多段線繪製爲屏幕空間多邊形，從而避免影響許多用戶的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);