색상 또는 재료가없는 CZML 폴리곤

Question

폴리곤 외곽선 만 있고 폴리곤면을 덮을 재료가없는 CZML 폴리곤을 그릴 수 있습니까?

내 요구 사항은 폴리곤에 완전히 잠긴 개체를 클릭 할 수있게하는 것입니다. 즉, 내부 다각형의 측면이 외부 다각형의 측면과 겹치지 않습니다. 따라서 폴리곤 외곽선을 그려서 내부 폴리곤이 클릭 이벤트를 듣게하고 싶습니다.

Answer 1

설명 답에 대단히 감사합니다. 당신의 대답은 폴리곤 외곽선의 너비를 증가시키고 자 할 때 유용합니다.

그러나 중공 폴리곤 (외곽선 만있는 다각형)을 구현하는 더 쉬운 방법은 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 픽셀. 이는 많은 시스템에서 다각형의 윤곽이 항상 얇음을 의미합니다.

또 다른 단점은 렌더러가 여전히 폴리곤 내부에서 투명 조각을 모두 고려한 다음 버려서 성능을 해칠 수 있다는 것입니다.

둘 다에 대한 해결책은 외곽선을 그릴 때 다각형 대신 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);