$$config title: cesium_surian_Sheet Top keywords: - GIS - surian $$ ## 01. 조회클릭 - 조회버튼 `` - 메서드 동작 surian.js fget_select_surian() ```js function fget_select_surian() { $(".slider-surian").slider("option", "value", 0); // (1) 동작중간에 다시 클릭하면, 처음부터 시작되도록 타임라인을 초기화함 $("tab-surian .time-btn").removeClass("active"); // (2) 재생, 정지 버튼의 활성화 상태를 제거함 let filePath = $("#select-surian2").val(); // (3) select-surian2는 scenarioList 로서 select테그에서 사용자가 선택한 BOD, SS, Chl-a 등 정보를 넘김 // $("#tab-surian-date").val().replace(/\s/gi,"").replace(/-/gi,"").replace(/:/gi,""); //날짜 공백, 특수문자 제거 // (4) curtain, sheet top 에 따라 구분하여 동작 // 구분 선택값과 항목 선택값을 넘김 if(selectSurian1 == "curtain") { loadVTPChk = true; fset_reset_surian("curtain"); fget_VTP_list(filePath); } else { surianDataChk = true; fset_reset_surian("sheet"); fget_surian_data(filePath); } } ``` - curtain과 sheet top 선택사항은 fset_reset_surian로 넘겨진다. - 각 항목값은 filePath로 curtain은 fget_VTP_list 를 동작 sheet top은 fget_surian_data를 동작 ## 02. 구분, 항목에 따라 VTP 또는 sheet 구성 ```js if(selectSurian1 == "curtain") { loadVTPChk = true; fset_reset_surian("curtain"); fget_VTP_list(filePath); } else { surianDataChk = true; fset_reset_surian("sheet"); (1) sheet 리셋 fget_surian_data(filePath); (2) sheet 생성 } ``` ### fset_reset_surian("sheet"); - 앞서 조회 등으로 preIndexSurian이 정의된 경우에 모형배열을 초기화하는 기능 ```js function fset_reset_surian(str) (중략) case "sheet": if(preIndexSurian != undefined) { //sheet 초기화 for(let i = 0; i < primitivesArr.length; i++) { primitivesArr[i].destroy(); (1) 수리안 모형배열 } bod = []; //수리안 모형 value 배열 xAxis = []; //수리안 모형 x좌표 배열 yAxis = []; //수리안 모형 y좌표 배열 primitivesArr = []; //수리안 모형 배열 axisPositionsArr = []; //수리안 모형 position 배열 priObjSetInterval = undefined; surianDataChk = true; preIndexSurian = undefined; showIndexSurian = undefined; playAnimationSurian = 'play'; $(".slider-surian").slider("option", "value", 0); //재생버튼 비활성화 추가 $("#tab-surian .time-btn").removeClass("active"); $(".surian-image-box").removeClass("on"); } break; (중략) ``` (1) 수리안 모형배열 `primitivesArr` : 수리안 모형배열으로서 조회시 제거되고 다시 구성됨 모형배열값을 비우고, 생성은 switch를 빠져나간후, fget_surian_data 메서드로 이루어집니다. Q. 재선언하면 되지 않나? i 반복문에서 destroy()는 왜 쓰는거지?? Q. 값이 대입되지 않은 변수 혹은 속성을 사용하려하면 undefined가 된다. reset을 하는데, undefined로 선언하는 이유가 뭐지..? ### fget_surian_data(filePath) ```js //surian NC data setting function fget_surian_data(filePath) { if(surianDataChk) { surianDataChk = false; fload_progress(1); fload_progress_change(30); //로딩바 100% let fileNameArr = { "bod": "BOD", "ss": "SSOL1", "chla": "TCHLA", "tp": "TP", "tn": "TN", "temp": "WTR_TEMP" }; // let name = '/AEM3D/TOP/' + filePath + '/AEM3D_SJ_SIM_' + fileNameArr[filePath] + '_result.nc'; let name = '/AEM3D/TOP/' + filePath + '/surian_result.nc'; // (1) response의 url을 구성 : http://office.magpiesoft.co.kr:8099/AEM3D/TOP/bod/surian_result.nc fetch(name).then(function(response) { return response.arrayBuffer(); // (2) arrayBuffer }).then(function(buffer) { let f = new hdf5.File(buffer, name); //console.log(f); window.f = f; // (3) hdf5.File(buffer, name) let Axis = f.get("xy").value; // (4) xy좌표값, bod값 할당 // bod = f.get("AEM3D_SJ_SIM_"+fileNameArr[filePath]).value; bod = f.get("BOD").value; divAxis(Axis); // (5) divAxis , xy좌표 분리 xAxis = division(xAxis, f.get("Y1").value.length); yAxis = division(yAxis, f.get("Y1").value.length); bod = division(bod, f.get("Y2").value.length); Draw2DMeshPloygons(); // (6) 수리안 모형 position setting }); } else { fget_showIndexSurian(); } } ``` (2) arrayBuffer() > fetch사용 [참고 1](https://developer.mozilla.org/en-US/docs/Web/API/Response/arrayBuffer) [참고 2](https://ko.javascript.info/fetch) ``` Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있습니다. ``` - fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환됩니다. 반환되는 프라미스는 fetch()를 호출하는 코드에서 사용됩니다. - js내장라이브러리로서 별도의 import가 필요없으며, 업데이트에 따른 에러방지 가능 promise기반으로 만들어졌기 때문에 데이터를 다루기 편하다. - `let promise = fetch(url, [options])` option을 비우면, GET메서드로 동작하여 url로 부터 정보를 받아옵니다. > response.arrayBuffer(); ``` Request와 Response 인터페이스는 본문을 추출할 수 있는 메서드들을 공유합니다. 추출 메서드는 모두 프로미스를 반환하며, 이 프로미스가 실제 본문 데이터로 이행합니다. 요청과 응답 모두 본문 데이터를 포함할 수 있습니다. - 응답을 ArrayBuffer 형태로 반환합니다. -> 바이너리 데이터(이진법)를 로우 레벨 형식으로 표현한 것 ``` - 그러면 반환하는 정보가 무슨 정보지..? (3) hdf5.File(buffer, name) - hdf5 : 대용량의 데이터를 저장하기 위한 데이터 형식 - 요청한 정보가 담겨있으며, bod값과 해당 좌표정보가 있다. (5) divAxis , xy좌표 분리 xAxis = []; //수리안 모형 x좌표 배열 yAxis = []; //수리안 모형 y좌표 배열 - X,Y좌표 분리 : 짝수이면 x좌표로, 홀수이면 y좌표로 push ```js function divAxis(arr) { for(let i=0; i= 2) index %= 2; switch(index) { case 0: yAxis.push(arr[i]); break; case 1: xAxis.push(arr[i]); break; } } } ``` - Axis배열길이는 19416이며, 각 x,y로 xAxis, yAxis 에 9708 길이씩 분리 --- - 2d array 4개씩 slice하여 배열로 구성, 결과적으로 9708사이즈가 4개가 한묶음되어 2427길이로 구성 Y1으로만 구분하는건 왜일까..? ```js function division(arr, size) { let i = []; let j = []; let temparray = []; let chunk = size; for (i=0, j=arr.length; i= 0) { curColor = colorRange_stream[findRangeColor(range_stream, rainValue)]; // curColor.alpha = alphaDefault; } return curColor; } ``` --- - colorRange_stream는 blue부터 red까지 설정되어있으며, Cesium.Color.fromBytes(0, 0, 255, 255) ~ Cesium.Color.fromBytes(255, 0, 0, 255) findRangeColor 메서드로 인덱스값을 리턴한다. - 가장 작은 경우는 0으로, 가장 큰 경우는 마지막 인덱스가 됨 - val가 6.4xx인 경우 6보다 큰 경우에 해당 색상값으로 설정한다. ```js function findRangeColor(array, val) { //If the value is less than the smallest value of range, the reward is 0 if(val < Math.min.apply(null,array)) { return 0; } //If the value is greater than the maximum value of the range, the reward will be the highest if(val > Math.max.apply(null,array)) { return array.length-1; } let idx = 0; let i = 0; let j = array.length; for(i; i val) { idx = i; break; } } return idx; }; ```