CesiumJS: 3D 지형 위에 폴리곤과 선 그리기

 

---

문제 요약

GeojsonDataSource.load()로 데이터를 불러와 polygon과 그 경계선을 그리려고 한다.

1. 3D 지형 위에 경계선을 그려야 함
2. 경계선이 가끔 사라지는 오류가 있음

 

해결 요약

1. Polygon을 그린 뒤, 그 위에 Polyline 타입으로 경계선을 그려준다.
2. Polyline(경계선)이 항상 카메라에 가깝도록 zIndex를 설정한다.

 

상세 설명

1. 3D 지형에 부착 가능한 면과 선 그리기

  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(
      "../SampleData/ne_10m_us_states.topojson",
      {
        stroke: Cesium.Color.HOTPINK,
        fill: Cesium.Color.PINK.withAlpha(0.5),
        strokeWidth: 3,
        //clampToGround: true
      }
    )
  );

카메라에 누가 더 가깝게 보이는지 순서를 정해서, 가려지는 녀석을 지정해주기로 했다. 통상적으로 Z-Index에서 순서 정리라고 표현하나 보다. 다른 3D 개발을 할 때에도 같은 용어를 썼던 것 같다. 이름은 같아도 디테일한 부분에서 다를 수 있으므로 사용하는 개발 환경이나 엔진에 따라 용법을 찾아봐야 한다. (그래도 거의 비슷하긴 함) CesiumJS Forum의 Z-Index 질의글 참고

Polyline이 가려지는 것이 문제이므로, Polyline의 Z-Index 값을 크게 해서 카메라에 가장 가깝게 위치하도록 했다.

polyline: {
    positions: element.polygon.hierarchy.getValue().positions,
    width: 2,
    material:  Cesium.Color.PINK.withAlpha(0.5),
    clampToGround: true,
    zIndex: 10 // 클수록 카메라에 가깝다
}
 

 

3. 일단 해결

여러 번 클릭해도 선이 지워지지 않고 잘 보임