Cesium JS에서 User Control 구현하기
이번시간에는 Cesium JS에서 User Controll을 구현하는 시간을 가져보도록 하겠습니다.
기능을 구현하여 라인과 폴리곤을 생성해보도록 하겠습니다.
먼저 결과 화면부터 확인하세요.
> 서비스바로가기
* 구현을 위해 작성한 소스코드입니다.
|
|
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(event) {
var earthPosition = viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
var dynamicPositions = new Cesium.CallbackProperty(function () {
return activeShapePoints;
}, false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
cs |
EventHandler를 위한 handler 변수를 지정하였습니다.
마우스 좌클릭 이벤트를 통해 shape를 그릴 position을 지정합니다.
|
|
handler.setInputAction(function(event) {
if (Cesium.defined(floatingPoint)) {
var newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
cs |
mouse move 이벤트로 포인트와 포인트 간 shape이 생성될 수 있게끔 하였습니다.
|
|
handler.setInputAction(function(event) {
terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
cs |
마우스 우클릭 이벤트를 통해 shape 그리기를 종료하고 새로운 shape를 생성할 수 있게끔 하였습니다.
shape 그리기를 종료하고 새로운 shape를 그리기 위해 아래와 같은 function을 구현하였습니다.
|
|
function terminateShape() {
activeShapePoints.pop();
drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
|
cs |
생성되고있던 shape와 찍혀있던 point를 remove함수로 삭제하였습니다.
아래는 포인트와 포인트를 통해 생성되는 Line과 Polygon에 대한 function 입니다.
|
|
// 포인트 생성
function createPoint(worldPosition) {
var point = viewer.entities.add({
position : worldPosition,
point : {
color : Cesium.Color.RED,
pixelSize : 10,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
return point;
}
// 라인과 폴리곤 생성
function drawShape(positionData) {
var shape;
if (drawingMode === 'line') {
shape = viewer.entities.add({
polyline : {
positions : positionData,
clampToGround : true,
width : 3
}
});
}
else if (drawingMode === 'polygon') {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(Cesium.Color.AQUA.withAlpha(0.15))
}
});
}
return shape;
}
|
cs |
포인트 생성을 위한 function 내에 point 옵션값 중 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND 옵션은
포인트가 TerrainMap(지형형상 지도)를 인식하여 평면이 아닌 Terrain에 맞게 움직일 수 있게끔 하는 옵션입니다.
물론 라인과 폴리곤도 Terrain에 맞추어 그려집니다.
다음은 실행화면 입니다.
처음 실행화면 입니다. 서울 지역 중 평지와 산지가 공존하는 지역을 선정하였습니다.
라인과 폴리곤을 선택할 수 있는 select Box를 구현하였습니다.
각 option을 통해 라인과 폴리곤을 생성할 수 있습니다.
먼저 라인 그리기를 통해 라인을 그리는 모습입니다.
일직선으로 라인을 생성했지만 사진과 같이 선이 울퉁불퉁한 것을 느끼실 수 있을겁니다.
라인이 생성될 때 Terrain에 맞춰 생성되었기 때문이죠
폴리곤 또한 마찬가지 입니다.
폴리곤도 각 면이 울퉁불퉁하게 보입니다.
폴리곤도 Terrain에 맞춰 생성되었습니다.
shape를 만들었으니 삭제하는 기능도 있어야겠죠?
라인 그리기와 폴리곤 그리기로 shape를 생성한 후 화면정리를 선택하면 생성하였던 shape가 삭제됩니다.
select Box 안에 화면정리 기능도 넣어두었습니다.
화면정리를 선택하여 shape들을 삭제한 모습입니다.
'꿀팁 - CesiumJS, nullschool' 카테고리의 다른 글
| Cesium JS에서 Camera FlyTo 기능 활용하기 (1) | 2019.05.10 |
|---|---|
| Cesium js 와 Qgis를 활용한 3D 건물 구현하기 (0) | 2019.04.01 |
| (재미삼아) Cesium JS를 활용한 운석 낙하 시뮬레이션 (3) | 2019.03.27 |
| Cesium JS에서 MouseMove 이벤트를 통한 위,경도 표출 (0) | 2019.03.06 |
| Cesium JS에서 gltf 포맷 활용 및 HeadingPitchRange 설정 (0) | 2019.02.26 |