반경 측정

마우스 모드를 반경 측정 모드로 변경한 후 클릭 지점 반경을 측정합니다.

첫번째 클릭 지점은 중점이 되고 두번째 클릭 지점까지 거리를 구하여 반지름을 형성합니다.

측정결과 값을 이벤트로 반환 받아 POI로 가시화 합니다.

기능 구현

Symbol

이미지 텍스쳐를 저장하는 텍스쳐 맵 오브젝트를 이 곳에 저장합니다.

JSSymbol에 대한 간략한 설명은 거리 측정 튜토리얼의 step 5. 거리 객체 생성 항목의 JSSymbol 설명을 참조하세요.

POILayer

생성한 JSPoint 오브젝트를 저장할 레이어를 이 변수에 저장합니다.

레이어를 저장하는 과정은 step 1.레이어 생성 단계를 참조하세요.

WallLayer

반경을 구분하는 벽면 폴리곤을 저장하는 레이어 입니다.

레이어를 저장하는 과정은 step 1.레이어 생성 단계를 참조하세요.

위 기능을 구현하는 전체 코드입니다.

/* 엔진 로드 후 실행할 초기화 함수(Module.postRun) */
function init() {

	Module.Start(window.innerWidth, window.innerHeight);

	 // 카메라 위치 설정
	Module.getViewCamera().setLocation(new Module.JSVector3D(129.128265, 35.171834, 1000.0));
	
	 // 아이콘 관리 심볼 생성
	GLOBAL.Symbol = Module.getSymbol();

	// 분석 출력 POI 레이어 생성
	var layerList = new Module.JSLayerList(true);
	GLOBAL.POILayer = layerList.createLayer("MEASURE_POI", Module.ELT_3DPOINT);
	GLOBAL.POILayer.setMaxDistance(20000.0);
	GLOBAL.POILayer.setSelectable(false);
	
	GLOBAL.WallLayer = layerList.createLayer("MEASURE_WALL", Module.ELT_POLYHEDRON);
	GLOBAL.WallLayer.setMaxDistance(20000.0);
	GLOBAL.WallLayer.setSelectable(false);
	GLOBAL.WallLayer.setEditable(true);
	
	initEvent(Module.canvas);
}

var GLOBAL = {
    Symbol : null,		// 아이콘 관리 심볼 객체
    POILayer : null,		// POI 저장 레이어
    WallLayer : 0			// POI, Icon 생성 인덱스
};

/* 이벤트 설정 */
function initEvent(canvas) {

	// 반경 이벤트 설정
	canvas.addEventListener("Fire_EventAddRadius", function(e){		
		if(e.dTotalDistance > 0) {
			// POI 오브젝트 삭제
			clearIcon();
			
			// 반경 POI 오브젝트 생성
			createPOI( new Module.JSVector3D(e.dMidLon, e.dMidLat, e.dMidAlt), "rgba(255, 204, 198, 0.8)", e.dTotalDistance, true );
		}
	});
}

/* 마우스 상태 변경 */
function setMouseState(_option){

    // 마우스 모드 설정
    Module.XDSetMouseState(_option);
}

/* 분석 내용 출력 POI 생성 */
function createPOI(_position, _color, _value, _balloonType) {

	// POI 아이콘 이미지를 그릴 Canvas 생성
	var drawCanvas = document.createElement('canvas');
    drawCanvas.width = 100;
    drawCanvas.height = 100;

	// 아이콘 이미지 데이터 반환
	var imageData = drawIcon(drawCanvas, _color, _value, _balloonType);

	// 심볼에 아이콘 이미지 등록
	if (GLOBAL.Symbol.insertIcon("Icon", imageData, drawCanvas.width, drawCanvas.height)) {

		// 등록한 아이콘 객체 반환
		var icon = GLOBAL.Symbol.getIcon("Icon");

		// JSPoint 객체 생성
		var poi = Module.createPoint("POI");

		poi.setPosition(_position);		// 위치 설정
		poi.setIcon(icon);				// 아이콘 설정

		// 레이어에 오브젝트 추가
		GLOBAL.POILayer.addObject(poi, 0);
	}
}

/* 아이콘 이미지 데이터 반환 */
function drawIcon(_canvas, _color, _value, _balloonType) {

	// 컨텍스트 반환 및 배경 초기화
	var ctx = _canvas.getContext('2d'),
		width = _canvas.width,
		height = _canvas.height
		;
	ctx.clearRect(0, 0, width, height);

	// 배경 Draw Path 설정 후 텍스트 그리기
	if (_balloonType) {
		drawBalloon(ctx, height*0.5, width, height, 5, height*0.25, _color);
		setText(ctx, width*0.5, height*0.2, _value);
	} else {
		drawRoundRect(ctx, 0, height*0.3, width, height*0.25, 5, _color);
		setText(ctx, width*0.5, height*0.5, _value);
	}

	return ctx.getImageData(0, 0, _canvas.width, _canvas.height).data;
}

/* 말풍선 배경 그리기 */
function drawBalloon(ctx,
					 marginBottom, width, height,
					 barWidth, barHeight,
					 color) {

	var wCenter = width * 0.5,
		hCenter = height * 0.5;

	// 말풍선 형태의 Draw Path 설정
	ctx.beginPath();
	ctx.moveTo(0, 				 0);
	ctx.lineTo(0, 				 height-barHeight-marginBottom);
	ctx.lineTo(wCenter-barWidth, height-barHeight-marginBottom);
	ctx.lineTo(wCenter, 		 height-marginBottom);
	ctx.lineTo(wCenter+barWidth, height-barHeight-marginBottom);
	ctx.lineTo(width,			 height-barHeight-marginBottom);
	ctx.lineTo(width,			 0);
	ctx.closePath();

	// 말풍선 그리기
	ctx.fillStyle = color;
    ctx.fill();
}

/* 둥근 사각형 배경 그리기 */
function drawRoundRect(ctx,
					   x, y,
					   width, height, radius,
					   color) {

	if (width < 2 * radius) 	radius = width * 0.5;
	if (height < 2 * radius) 	radius = height * 0.5;

	ctx.beginPath();
	ctx.moveTo(x+radius, y);
	ctx.arcTo(x+width, 	y, 	 		x+width, 	y+height, 	radius);
	ctx.arcTo(x+width, 	y+height, 	x,		 	y+height, 	radius);
	ctx.arcTo(x, 	 	y+height, 	x,   		y,   		radius);
	ctx.arcTo(x,	   	y,   	 	x+width, 	y,   		radius);
	ctx.closePath();

	// 사각형 그리기
	ctx.fillStyle = color;
    ctx.fill();

	return ctx;
}

/* 텍스트 그리기 */
function setText(_ctx, _posX, _posY, _value) {

	var strText = "";

	// 텍스트 문자열 설정
	if (typeof _value == 'number') {
		strText = setKilloUnit(_value, 0.001, 0);
	} else {
		strText = _value;
	}

	// 텍스트 스타일 설정
	_ctx.font = "bold 16px sans-serif";
    _ctx.textAlign = "center";
	_ctx.fillStyle = "rgb(0, 0, 0)";

	// 텍스트 그리기
    _ctx.fillText(strText, _posX, _posY);
}

/* m/km 텍스트 변환 */
function setKilloUnit(_text, _meterToKilloRate, _decimalSize){

	if (_decimalSize < 0){
		_decimalSize = 0;
	}
	if (typeof _text == "number") {
		if (_text < 1.0/(_meterToKilloRate*Math.pow(10,_decimalSize))) {
			_text = _text.toFixed(1).toString()+'m';
		} else {
			_text = (_text*_meterToKilloRate).toFixed(2).toString()+'㎞';
		}
	}
	return _text;
}

/* 분석 내용 초기화 */
function clearAnalysis() {

	// 실행 중인 분석 내용 초기화
	Module.XDClearCircleMeasurement();

	if (GLOBAL.WallLayer == null) {
		return;
	}

	// icon 삭제
	clearIcon();

	// POI 오브젝트 삭제
	GLOBAL.WallLayer.removeAll();
}

/* icon 초기화 */
function clearIcon() {

	if (GLOBAL.POILayer == null) {
		return;
	}

	// 등록된 아이콘 리스트 삭제
	var icon, poi;

	poi = GLOBAL.POILayer.keyAtObject("POI");
	
	if (poi == null) {
		return;
	}
	
	icon = poi.getIcon();

	// 아이콘을 참조 중인 POI 삭제
	GLOBAL.POILayer.removeAtKey("POI");

	// 아이콘을 심볼에서 삭제
	GLOBAL.Symbol.deleteIcon(icon.getId());
}

이어서 코드의 세부 단계에 대해 알아봅니다.

step 1. 레이어 생성

반경 측정 Icon 및 반경 값을 가시화 할 레이어를 생성합니다.

레이어 타입에 대한 설명은 여기를 참조해 주십시오.

var layerList = new Module.JSLayerList(true);

GLOBAL.POILayer = layerList.createLayer("MEASURE_POI", Module.ELT_3DPOINT);
GLOBAL.POILayer.setMaxDistance(20000.0);
GLOBAL.POILayer.setSelectable(false);

GLOBAL.WallLayer = layerList.createLayer("MEASURE_WALL", Module.ELT_POLYHEDRON);
GLOBAL.WallLayer.setMaxDistance(20000.0);
GLOBAL.WallLayer.setSelectable(false);
GLOBAL.WallLayer.setEditable(true);

step 2. 이벤트 등록

엔진 내부에서 계산된 반경을 반환 받기 위해 이벤트를 등록합니다.

function initEvent(canvas) {

    // 반경 이벤트 설정
    canvas.addEventListener("Fire_EventAddRadius", function(e){		
        if(e.dTotalDistance > 0) {
            // 반경 POI 오브젝트 생성
            createPOI( new Module.JSVector3D(e.dMidLon, e.dMidLat, e.dMidAlt), "rgba(255, 204, 198, 0.8)", e.dTotalDistance );
        }
    j});
}

Fire_EventAddRadius 이벤트는 마우스 모드가 MML_ANALYS_AREA_CIRCLE일 경우 발생합니다.

step 3. 마우스모드 변경

반경 측정을 위해서 마우스 모드를 변경합니다.

마우스 모드에 대한 설명은 여기를 참조해 주십시오.

Module.XDSetMouseState(Module.MML_ANALYS_AREA_CIRCLE);

step 4 - 1. 반경 Icon 생성

반환 받은 반경 값을 랜더링 하기 위해 Icon을 생성합니다.

function drawIcon(_canvas, _color, _value) {

    // 컨텍스트 반환 및 배경 초기화
    var ctx = _canvas.getContext('2d'),
        width = _canvas.width,
        height = _canvas.height
        ;
    ctx.clearRect(0, 0, width, height);

    // 배경 Draw Path 설정 후 텍스트 그리기
    drawBalloon(ctx, height*0.5, width, height, 5, height*0.25, _color);
    setText(ctx, width*0.5, height*0.2, _value);
	
    return ctx.getImageData(0, 0, _canvas.width, _canvas.height).data;
}

맨 처음 이미지를 그릴 canvas를 생성하고, 글자를 작성할 배경을 칠한 후(step 4-2. 반경 말풍선 Icon 생성)

반환 된 고도 값을 토대로 텍스트를 입력합니다. (step 4-3. 반경 측정 결과 값 Icon 생성)

step 4 - 2. 반경 말풍선 Icon 생성

반환 받은 반경 값을 가시화 할 말풍선을 캔버스에 그립니다.

function drawBalloon(ctx,  marginBottom, width, height, barWidth, barHeight, color) {

    var wCenter = width * 0.5,
        hCenter = height * 0.5;

    // 말풍선 형태의 Draw Path 설정
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, height-barHeight-marginBottom);
    ctx.lineTo(wCenter-barWidth, height-barHeight-marginBottom);
    ctx.lineTo(wCenter, height-marginBottom);
    ctx.lineTo(wCenter+barWidth, height-barHeight-marginBottom);
    ctx.lineTo(width, height-barHeight-marginBottom);
    ctx.lineTo(width, 0);
    ctx.closePath();

    // 말풍선 그리기
    ctx.fillStyle = color;
    ctx.fill();
}

step 4 - 3. 반경 측정 결과 값 Icon 생성

반환 받은 반경 값을 말풍선 위에 텍스트로 그립니다.

function setText(_ctx, _posX, _posY, _value) {

    var strText = "";

    // 텍스트 문자열 설정
    if (typeof _value == 'number') {
        strText = setKilloUnit(_value, 0.001, 0);
    } else {
        strText = _value;
    }

    // 텍스트 스타일 설정
    _ctx.font = "bold 16px sans-serif";
    _ctx.textAlign = "center";
    _ctx.fillStyle = "rgb(0, 0, 0)";

    // 텍스트 그리기
    _ctx.fillText(strText, _posX, _posY);
}

step 4 - 4. 반경 측정 단위(m/km) 텍스트 변환

반환 받은 반경 값을 m/km 텍스트로 변환합니다.

function setKilloUnit(_text, _meterToKilloRate, _decimalSize){

    if (_decimalSize < 0){
        _decimalSize = 0;
    }
    if (typeof _text == "number") {
        if (_text < 1.0/(_meterToKilloRate*Math.pow(10,_decimalSize))) {
            _text = _text.toFixed(1).toString()+'m';
        } else {
            _text = (_text*_meterToKilloRate).toFixed(2).toString()+'㎞';
        }
    }
    return _text;
}

step 5. 반경 객체 생성

생성한 Icon으로 객체를 만들고 레이어에 추가합니다.

function createPOI(_position, _color, _value) {

    // POI 아이콘 이미지를 그릴 Canvas 생성
    var drawCanvas = document.createElement('canvas');
    drawCanvas.width = 100;
    drawCanvas.height = 100;

    // 아이콘 이미지 데이터 반환
    var imageData = drawIcon(drawCanvas, _color, _value);

    // 심볼에 아이콘 이미지 등록
    if (GLOBAL.Symbol.insertIcon("Icon", imageData, drawCanvas.width, drawCanvas.height)) {

        // 등록한 아이콘 객체 반환
        var icon = GLOBAL.Symbol.getIcon("Icon");

        // JSPoint 객체 생성
        var poi = Module.createPoint("POI");

        poi.setPosition(_position);    // 위치 설정
        poi.setIcon(icon);    // 아이콘 설정
        
        // 레이어에 오브젝트 추가
        GLOBAL.POILayer.addObject(poi, 0);
    }
}

step 6. 반경 측정 초기화

반경 측정 결과 및 객체를 초기화합니다.

function clearAnalysis() {

    // 실행 중인 분석 내용 초기화
    Module.XDClearCircleMeasurement();

    if (GLOBAL.WallLayer == null) {
        return;
    }

    // icon 삭제
    if (GLOBAL.POILayer == null) {
        return;
    }

    // 등록된 아이콘 리스트 삭제
    var icon, poi;

    poi = GLOBAL.POILayer.keyAtObject("POI");
	
    if (poi == null) {
        return;
    }
	
    icon = poi.getIcon();

    // 아이콘을 참조 중인 POI 삭제
    GLOBAL.POILayer.removeAtKey("POI");

    // 아이콘을 심볼에서 삭제
    GLOBAL.Symbol.deleteIcon(icon.getId());

    // POI 오브젝트 삭제
    GLOBAL.WallLayer.removeAll();
}

결과 화면

반경 측정 과정에 대한 라이브 코드를 확인해 보고 싶으시다면? 여기를 클릭해 주세요