[브이월드3D Plug-in] 둘러보기와 로드뷰 연계방안

[공공칠빵]

[FGIS/Pro3D] 브이월드 WebGL 3.0버전 Plug-in 기반의 활용시스템

지오프롭테크 (GeoProptech) = 지리정보(geographic information system) + 부동산 (Property) + 기술 (Tech)

브이월드 WebGL 3.0버전 Cesium으로 개발공부를 하시고 싶나요?
* 소스 공유 회원들과의 소스 오픈과 공동 개발입니다.
개요: https://cafe.naver.com/gisapplication/1234
초기 GIS공부나 초보용으로 공개하려 했으나, 복잡한 공간연산과 개발 템플릿으로 바로 사용가능하고 활용개발시간을 줄이는 단계까지 개발하다보니 기존 개발자에게 한정된 인원과 기간에 판매 하기로 결정하였습니다. 특히 기존 GIS개발하시는 분들 한정으로 본 카페 회원이시분만 이글을 보실 수 있습니다.
* 단하나의 조건 : 3D에서 유용한 추가된 아이디어와 기능은 공유하시어 저에게 메일로 주시면 피드백하면서 공동 개발해야 함.

- 현 브이월드 3.0버전이나 URL/API 변경시는 스스로 업데이트하세요. 질의응답 없음.
- 현 템플릿으로 확장개발은 스스로 공보하면서 초기 개발시간을 단축하는 용도로 활용하세요. 질의응답 없음.
- 코딩 공부가 아닌 3D개발 아이디어와 소스 공유가 목표입니다.

[브이월드3D Plug-in] 둘러보기와 로드뷰 연계방안

​[VWORLD3D] 브이월드 WebGL 3.0버전 Plug-in의 로드뷰 연계를 보시고, 3인칭 모드에서의 방향과 시야각의 표현을 1인칭 모드에서 연동하도록 아이디어를 제공하여 주셔서 본체 소스에 적용하였습니다.

이외로 분석 속도, 자주 다운, 세슘에서의 불가 기능 등 문제점도 제시하셨는데요. 일단 이러한 문제도 해결하는데 노력은 해보는중입니다.

다만, 본 소스오픈은 코딩보다는 아이템, 아이디어, 메쉬업 등 3D활용을 위한 방안을 먼저 중점을 두고 공동개발할것입니다.

기능요건
1. 로드뷰 3인칭 모드에서 1인칭모드인 둘러보기로 전환. (반대 전환은 적용하지 않음)
2. 1인칭 둘러보기/로드뷰모드에서 브이월드의 이동버튼 생성으로 로드뷰연동. 방향과 상하 각도 연동 포함.
3. 1인칭 모드에서 로드뷰창에서 이동, 방향, 상하 각도 조작시 브이월드3D 연동.

재생6

00:48

•  
•  

접기/펴기

브이월드3D 둘러보기와 로드뷰 연동

* 주요소스

1. 브이월드3D이벤트로 로드뷰 이동, 방향,상하각 연동

로드뷰와 방향과 상하각도는 상이하므로 값을 조정해서 연동 함.

//로드뷰 연동
function GA_aroundView_ShowRoadView(_lonlat) {
MapLayer_SetVisible("UTIS_WMSLayer", false);
ws3d.viewer.map.onPickingElement.removeEventListener(roadviewPickingEventHandler);
ws3d.viewer.map.onPickingElement._listeners.length = 1;
road_DrawOk = false;
Show_DaumRoadView(_lonlat);
RemoveRoadViewMarker();
ws3d.viewer.camera.moveEnd.addEventListener(GA_aroundView_SetRoadView);
}
function GA_aroundView_SetRoadView() {
//로드뷰 마우스 오버시 제외
if(roadview && !road_mouseoverOk){
var _lonlat = [ws3d.viewer.camera.positionCartographic.longitudeDD, ws3d.viewer.camera.positionCartographic.latitudeDD];
if(!(AroundViewLongLat[0] == _lonlat[0] && AroundViewLongLat[1] == _lonlat[1])){
AroundViewLongLat = [_lonlat[0], _lonlat[1]];
var position = new daum.maps.LatLng(_lonlat[1], _lonlat[0]);
var position = new daum.maps.LatLng(_lonlat[1], _lonlat[0]);
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
if(panoId)roadview.setPanoId(panoId, position);
});
}


var heading = ws3d.viewer.camera.heading * (180 / Math.PI) - 360;
var tilt = - ws3d.viewer.camera.pitch * (180 / Math.PI);
roadview.setViewpoint({
pan: heading,
tilt: tilt,
zoom: -3
});
}
}
function GA_aroundView_setCameraView(_mode) {
if(_mode == 'FRONT'){
ws3d.viewer.camera.moveForward(5);
}else if(_mode == 'BACK'){
ws3d.viewer.camera.moveBackward(5);
}else if(_mode == 'LEFT'){
ws3d.viewer.camera.moveLeft(5);
}else if(_mode == 'RIGHT'){
ws3d.viewer.camera.moveRight(5);
}
// 지면 높이(height) 유지
var _lonlat = [ws3d.viewer.camera.positionCartographic.longitudeDD, ws3d.viewer.camera.positionCartographic.latitudeDD];
const getHeight = ws3d.viewer.scene.globe.getHeight(ws3d.common.Cartographic.fromDegrees(_lonlat[0], _lonlat[1])); // 해당 위치의 지면 높이
const newPosition = Cesium.Cartesian3.fromRadians(ws3d.viewer.camera.positionCartographic.longitude, ws3d.viewer.camera.positionCartographic.latitude, getHeight+1);
ws3d.viewer.camera.setView({
destination: newPosition,
orientation: {
heading: ws3d.viewer.camera.heading,
pitch: ws3d.viewer.camera.pitch,
roll: ws3d.viewer.camera.roll
}
});
//로드뷰 위치변동으로 다시 함.
var position = new daum.maps.LatLng(_lonlat[1], _lonlat[0]);
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
if(panoId)roadview.setPanoId(panoId, position);
});
​
var _lonlat = [ws3d.viewer.camera.positionCartographic.longitudeDD, ws3d.viewer.camera.positionCartographic.latitudeDD];
AroundViewLongLat = [_lonlat[0], _lonlat[1]];
}

2. 로드뷰 이벤트로 브이월드3D 이동, 방향,상하각 연동

주요소스중 브이월드 지도이동시에는 항상 지면에 위치하도록 보정해야합니다.

function positionOrpov_changed() {
try {
var pt = roadview.getPosition();
var heading = roadview.getViewpoint().pan;
var tilt = roadview.getViewpoint().tilt;
var zoom = roadview.getViewpoint().zoom;
var _lonlat = [pt.getLng(), pt.getLat()];
if(road_DrawOk){
Create3DRoadViewMarker(_lonlat, heading, tilt, zoom);
ws3d.viewer.scene.requestRender();
}else{
//로드뷰 마우스 오버시 이동하면 브이월드도 이동
if(road_mouseoverOk){
//지상으로 내림
var cartographic = ws3d.common.Cartographic.fromDegrees(_lonlat[0], _lonlat[1])
var getHeight = ws3d.viewer.scene.globe.getHeight(cartographic); // 해당 위치의 지면 높이
var newPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, getHeight+1);
ws3d.viewer.camera.setView({
destination: newPosition,
orientation: {
heading: (heading + 360) / (180 / Math.PI),
pitch: - tilt / (180 / Math.PI),
roll: ws3d.viewer.camera.roll
}
});
}
}
} catch(e) {


}
}
//둘러보기전환
function roadviewSetMode(){
$('#btn_roadviewSetMode').css('display', 'none');
var pt = roadview.getPosition();
var _lonlat = [pt.getLng(), pt.getLat()];
GA_aroundView_Run(_lonlat)
}