|
|
@@ -20,7 +20,7 @@ g_color.set('LTC3', '#ee0000;');
|
|
|
|
|
|
const CCTV_DISPLAY_TIME = 30 * 1000; // 영상 표출 시간
|
|
|
const VMS_DISPLAY_TIME = 4 * 1000; // VMS 이미지 표출 시간
|
|
|
-
|
|
|
+const _TrafficListMap = new Map();
|
|
|
let _MapHandler; //카카오 맵 핸들러
|
|
|
let _Level = 6; //현재 줌레벨
|
|
|
let _MarkerHandle;
|
|
|
@@ -192,7 +192,6 @@ $(()=>{
|
|
|
if (markerArr.length) {
|
|
|
showIdArr = markerArr.map((item)=>{
|
|
|
if (item.ADDR && item.ADDR.includes(searchText)) {
|
|
|
- console.log(item);
|
|
|
if (type === 'intersectionCamera') {
|
|
|
return 'intersection-' + item.prop.ixr_id;
|
|
|
}
|
|
|
@@ -392,8 +391,8 @@ function getAtrd() {
|
|
|
getDataAsync("/api/traffic/atrd-vertex-all", "POST", null, null, (jsonData)=>{
|
|
|
if (jsonData && jsonData.length > 0) {
|
|
|
_AtrdMap = new Map();
|
|
|
- console.log(jsonData);
|
|
|
jsonData.forEach((obj)=>{
|
|
|
+ _TrafficListMap.set(obj.level, obj.list);
|
|
|
obj.list.forEach((atrd)=>{
|
|
|
const key = atrd.atrd_id +'_' + atrd.drct_cd +'_' + obj.level;
|
|
|
let atrdArr = _AtrdMap.get(key);
|
|
|
@@ -408,6 +407,8 @@ function getAtrd() {
|
|
|
_AtrdMap.get(key).push(atrd);
|
|
|
});
|
|
|
});
|
|
|
+
|
|
|
+ getVertex();
|
|
|
}
|
|
|
}, null);
|
|
|
|
|
|
@@ -433,7 +434,9 @@ function getAtrd() {
|
|
|
const upHillId = upHill.atrd_id;
|
|
|
const downHillId = downHill.atrd_id;
|
|
|
|
|
|
- listStr += `<li id="atrd_${upHillId}_${downHillId}" onclick="atrdClickEvent('${upHillId}', '${downHillId}')">${key}</li>`
|
|
|
+ listStr += `<li id="atrd_${upHillId}_${downHillId}" onclick="atrdClickEvent('${upHillId}', '${downHillId}')">
|
|
|
+ ${key}
|
|
|
+ </li><ul id="${upHillId}_${downHillId}"></ul>`
|
|
|
mobileStr += `<option value="${upHillId}_${downHillId}">${key}</option>`
|
|
|
}
|
|
|
}
|
|
|
@@ -455,7 +458,7 @@ function getAtrd() {
|
|
|
}
|
|
|
})
|
|
|
_MarkerHandle.selectedAtrd = [];
|
|
|
- getVertex();
|
|
|
+ // getVertex();
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -468,25 +471,12 @@ function getAtrd() {
|
|
|
listSection.html(listStr);
|
|
|
});
|
|
|
|
|
|
- getVertex();
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 소통정보 가져오기
|
|
|
*/
|
|
|
function getVertex() {
|
|
|
- let markerArr = _MarkerHandle.findMarkerArr('traffic');
|
|
|
- if (markerArr.length > 0) {
|
|
|
- markerArr.forEach((obj) => {
|
|
|
- obj.setVisibleMarker(false);
|
|
|
- if (obj.infoWindow) {
|
|
|
- obj.infoWindow.setMap(null);
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- _MarkerHandle.findMarkerArr('traffic').markers = [];
|
|
|
- }
|
|
|
-
|
|
|
let level = _MapHandler.getLevel();
|
|
|
const bounds = _MapHandler.getBounds();
|
|
|
const swLatLng = bounds.getSouthWest();
|
|
|
@@ -500,10 +490,25 @@ function getVertex() {
|
|
|
}
|
|
|
|
|
|
getDataAsync('/api/traffic/vertex-list', 'POST', data, null, (jsonData)=>{
|
|
|
+ let markerArr = _MarkerHandle.findMarkerArr('traffic');
|
|
|
+ if (markerArr.length > 0) {
|
|
|
+ markerArr.forEach((obj) => {
|
|
|
+ obj.setVisibleMarker(false);
|
|
|
+ if (obj.infoWindow) {
|
|
|
+ obj.infoWindow.setMap(null);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ _MarkerHandle.findMarkerArr('traffic').markers = [];
|
|
|
+ }
|
|
|
if (jsonData && jsonData.length > 0) {
|
|
|
let upHill = null;
|
|
|
let dowHill = null;
|
|
|
+ let upHillId = null;
|
|
|
+ let downHillId = null;
|
|
|
let roadIdArr = [];
|
|
|
+ let uRoadIdArr = [];
|
|
|
+ let dRoadIdArr = [];
|
|
|
if (_MarkerHandle.selectedAtrd.length > 0 && _MarkerHandle.isDraw('traffic')) {
|
|
|
const selectedAtrd = _MarkerHandle.selectedAtrd;
|
|
|
upHill = _MarkerHandle.findMarkerObj('atrd', selectedAtrd[0]);
|
|
|
@@ -515,26 +520,152 @@ function getVertex() {
|
|
|
const upHillArr = _AtrdMap.get(selectedAtrd[0]);
|
|
|
const downHillArr = _AtrdMap.get(selectedAtrd[1]);
|
|
|
const roadArr = [...upHillArr, ...downHillArr];
|
|
|
+ upHillId = selectedAtrd[0].substring(0, selectedAtrd[0].indexOf('_'));
|
|
|
+ downHillId = selectedAtrd[1].substring(0, selectedAtrd[1].indexOf('_'));
|
|
|
roadArr.forEach((obj)=>{
|
|
|
+ if (obj.atrd_id === upHillId) {
|
|
|
+ uRoadIdArr.push(obj);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ dRoadIdArr.push(obj);
|
|
|
+ }
|
|
|
roadIdArr.push(obj.road_id.toString());
|
|
|
});
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+ const $ul = $(`#${upHillId}_${downHillId}`);
|
|
|
+
|
|
|
+ const trafficArr = [];
|
|
|
jsonData.forEach((obj)=>{
|
|
|
const trafficObj = new TrafficObj(obj);
|
|
|
if (roadIdArr.length > 0) {
|
|
|
- if (roadIdArr.includes(trafficObj.ID.toString())) {
|
|
|
+ if (roadIdArr.includes(trafficObj.ID.toString())) {
|
|
|
trafficObj.polyBackLine.setOptions({
|
|
|
strokeColor : 'black',
|
|
|
});
|
|
|
+ trafficArr.push(obj);
|
|
|
}
|
|
|
}
|
|
|
_MarkerHandle.markerMaps.get('traffic').markers.push(trafficObj);
|
|
|
})
|
|
|
+ // if ($ul[0]) {
|
|
|
+ // $ul.empty();
|
|
|
+ // let uRoadObjArr = [];
|
|
|
+ // let dRoadObjArr = [];
|
|
|
+ // let upStr = '';
|
|
|
+ // let downStr = '';
|
|
|
+ // for (let ii= uRoadIdArr.length - 1; ii >= 0; ii--) {
|
|
|
+ // const idx = trafficArr.findIndex(obj=> obj.roadway_id === uRoadIdArr[ii].road_id.toString());
|
|
|
+ // if (idx >= 0) {
|
|
|
+ // uRoadObjArr.push(trafficArr[idx])
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // uRoadObjArr.forEach((obj, idx)=>{
|
|
|
+ // const {cmtr_grad_cd, strt_nm_node, end_nm_node, sped, trvl_hh, roadway_id} = obj;
|
|
|
+ // const isEnd = (uRoadObjArr.length - 1) === idx;
|
|
|
+ // upStr +=`<div class="traffic-list" onmouseover="showSelectLine('${roadway_id}', true, ${isEnd})" onmouseleave="showSelectLine('${roadway_id}', false, ${isEnd})">
|
|
|
+ // <div>
|
|
|
+ // <div class="up arrow ${cmtr_grad_cd}"></div>
|
|
|
+ // </div>
|
|
|
+ // <div>
|
|
|
+ // <div>${end_nm_node}</div>
|
|
|
+ // <div>${sped}km/h 약 ${trvl_hh}분</div>
|
|
|
+ // </div>
|
|
|
+ // </div>`
|
|
|
+ // if (isEnd) {
|
|
|
+ // upStr+= `<div style="margin-left: 35px; padding-top: 10px; padding-bottom: 10px;">${strt_nm_node}</div>`;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ //
|
|
|
+ // for (let ii= 0; ii < dRoadIdArr.length; ii++) {
|
|
|
+ // const idx = trafficArr.findIndex(obj=> obj.roadway_id === dRoadIdArr[ii].road_id.toString());
|
|
|
+ // if (idx >= 0) {
|
|
|
+ // dRoadObjArr.push(trafficArr[idx]);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // dRoadObjArr.forEach((obj, idx)=>{
|
|
|
+ // const {sped, trvl_hh, cmtr_grad_cd, strt_nm_node, end_nm_node, roadway_id} = obj;
|
|
|
+ // let isStart = idx === 0;
|
|
|
+ // downStr +=`<div class="traffic-list" onmouseover="showSelectLine('${roadway_id}', true, ${isStart})" onmouseleave="showSelectLine('${roadway_id}', false, ${isStart})">
|
|
|
+ // <div>
|
|
|
+ // <div class="down arrow ${cmtr_grad_cd}"></div>
|
|
|
+ // </div>
|
|
|
+ // <div>
|
|
|
+ // <div>${strt_nm_node}</div>
|
|
|
+ // <div>${sped}km/h 약 ${trvl_hh}분</div>
|
|
|
+ // </div>
|
|
|
+ // </div>`
|
|
|
+ // if (dRoadObjArr.length - 1 === idx) {
|
|
|
+ // downStr += `<div style="margin-left: 35px; padding-top: 10px; padding-bottom: 10px;">${end_nm_node}</div>`
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // let str = `<li>
|
|
|
+ // <div>
|
|
|
+ // <div>
|
|
|
+ // ${upStr}
|
|
|
+ // </div>
|
|
|
+ // <div>
|
|
|
+ // ${downStr}
|
|
|
+ // </div>
|
|
|
+ // </div>
|
|
|
+ // </li>`;
|
|
|
+ //
|
|
|
+ // $ul.html(str);
|
|
|
+ // }
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
+function showSelectLine(id, isShow, isEnd) {
|
|
|
+ const trafficObj = _MarkerHandle.findMarkerObj('traffic', id);
|
|
|
+ if (trafficObj.infoWindow) trafficObj.infoWindow.setMap(null);
|
|
|
+ if (isShow) {
|
|
|
+ const xCoordinateArr = trafficObj.obj.x_crdn.split(',');
|
|
|
+ const yCoordinateArr = trafficObj.obj.y_crdn.split(',');
|
|
|
+ let position = getKakaoPosition(yCoordinateArr[0], xCoordinateArr[0]);
|
|
|
+ if (isEnd) {
|
|
|
+ console.log(isEnd);
|
|
|
+ const lastYIdx = yCoordinateArr.length - 1;
|
|
|
+ const lastXIdx = xCoordinateArr.length - 1;
|
|
|
+ position = getKakaoPosition(yCoordinateArr[lastYIdx], xCoordinateArr[lastXIdx])
|
|
|
+ }
|
|
|
+ const {cmtr_grad_cd, grad_nm, strt_nm_node, end_nm_node, trvl_hh, sped} = trafficObj.obj;
|
|
|
+ const iwContent =
|
|
|
+ `<div class="trafficPop">
|
|
|
+ <div class="traffic-speed ${cmtr_grad_cd}">
|
|
|
+ <span class="traffic-name">${trafficObj.NAME}</span>
|
|
|
+ <span class="traffic-speed-info border-back ${cmtr_grad_cd}">${grad_nm}</span>
|
|
|
+ </div>
|
|
|
+ <div class="traffic-info">
|
|
|
+ <span>${strt_nm_node} → ${end_nm_node}</span>
|
|
|
+ <br>
|
|
|
+ <span>소요시간 : </span>
|
|
|
+ <span class="${cmtr_grad_cd}">약 ${textFormat(trvl_hh)}분 </span>
|
|
|
+ <span> 속도 : </span>
|
|
|
+ <span class="${cmtr_grad_cd}">약 ${textFormat(sped)}km/h</span>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ trafficObj.infoWindow = new kakao.maps.CustomOverlay({
|
|
|
+ clickable: true,
|
|
|
+ position: position,
|
|
|
+ content: iwContent,
|
|
|
+ xAnchor: -0.05,
|
|
|
+ yAnchor: 1.1,
|
|
|
+ zIndex: 999
|
|
|
+ });
|
|
|
+
|
|
|
+ trafficObj.polyLine.setOptions({strokeColor: '#0000FF'});
|
|
|
+ trafficObj.infoWindow.setMap(_MapHandler.map);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ trafficObj.polyLine.setOptions({strokeColor: g_color.get(trafficObj.obj.cmtr_grad_cd)});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 간선도로 클릭 이벤트
|
|
|
* @param AupHillId 상행 ID
|
|
|
@@ -544,6 +675,7 @@ function atrdClickEvent(AupHillId, AdownHillId) {
|
|
|
if (! _MarkerHandle.findMarkerArr('atrd').length) {
|
|
|
return alert('도로정보를 불러오는 중입니다.');
|
|
|
}
|
|
|
+
|
|
|
if (_MarkerHandle.selectedAtrd.length > 0) {
|
|
|
_MarkerHandle.selectedAtrd.forEach((atrdId)=>{
|
|
|
_MarkerHandle.findMarkerObj('atrd', atrdId).marker.setMap(null);
|
|
|
@@ -575,6 +707,10 @@ function atrdClickEvent(AupHillId, AdownHillId) {
|
|
|
|
|
|
_MarkerHandle.selectedAtrd = [AupHillId + '_0_' + boundAfterLevel, AdownHillId + '_1_' + boundAfterLevel];
|
|
|
getVertex();
|
|
|
+ if ($('.list-content > ul.on')[0]) {
|
|
|
+ $('.list-content > ul.on').removeClass('on');
|
|
|
+ }
|
|
|
+ $(`#${AupHillId}_${AdownHillId}`).addClass('on');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -616,7 +752,7 @@ class MarkerObj {
|
|
|
this.prop = {...DATA};
|
|
|
this.size = [48, 48, 48, 48, 40, 32, 24, 22, 20, 18, 18];
|
|
|
this.atrdSize = [48, 48, 48, 48, 48, 48, 48, 24, 24, 24, 24];
|
|
|
- this.imageOnOff = ['cctv', 'incident', 'vms', 'parking'];
|
|
|
+ this.imageOnOff = ['cctv', 'incident', 'vms'];
|
|
|
}
|
|
|
|
|
|
//스마트교차로 카메라는 카메라 방향별로 이미지를 돌려야하므로 두개 만드는 방식이 다름
|
|
|
@@ -717,7 +853,7 @@ class MarkerObj {
|
|
|
}
|
|
|
|
|
|
//클릭 이벤트
|
|
|
- click() {
|
|
|
+ async click() {
|
|
|
const selectObj = _MarkerHandle.selectedMarker;
|
|
|
if (selectObj) {
|
|
|
if (selectObj === this) {
|
|
|
@@ -752,6 +888,14 @@ class MarkerObj {
|
|
|
if (this.iwContent) {
|
|
|
this.infoWindow = $(this.iwContent);
|
|
|
$('body').append(this.infoWindow);
|
|
|
+ if (this.type === 'parking' && this.prop.prk_plce_nmbr) {
|
|
|
+ const parkData = await $.ajax({url: '/api/traffic/parking-live-info', method: 'post', data:{nmbr: this.prop.prk_plce_nmbr}});
|
|
|
+ if (parkData.remndr_prk_cmprt_co && parkData.remndr_prk_cmprt_co >= 0) {
|
|
|
+ const remndrPrkCmprtCo = parkData.remndr_prk_cmprt_co + '대';
|
|
|
+ $('.remndr_prk_cmprt_co').attr('title', '주차가능면수 : '+ remndrPrkCmprtCo);
|
|
|
+ $('.remndr_prk_cmprt_co').html(remndrPrkCmprtCo);
|
|
|
+ }
|
|
|
+ }
|
|
|
let type = this.type;
|
|
|
if (type === 'intersectionCamera') type = 'cctv';
|
|
|
setInfoWindowPositionWidthDraggable(this, type);
|
|
|
@@ -1100,8 +1244,8 @@ class TbParkingObj extends MarkerObj{
|
|
|
URL : null,
|
|
|
TYPE : 'parking',
|
|
|
DATA : obj,
|
|
|
- IMAGE_TYPE : '1',
|
|
|
- IMAGE : '/images/icon/parking',
|
|
|
+ IMAGE_TYPE : '',
|
|
|
+ IMAGE : '/images/icon/parking' + (obj.prk_plce_nmbr ? '1-2' : '2-2'),
|
|
|
ADDR : obj.parking_addr,
|
|
|
})
|
|
|
this.iwContent = this.getIwContent();
|
|
|
@@ -1119,14 +1263,25 @@ class TbParkingObj extends MarkerObj{
|
|
|
<div class="row">
|
|
|
<div>주차면수</div>
|
|
|
<div title="주차면수 : ${prop.parking_num} 대">${prop.parking_num} 대</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
+ </div>`;
|
|
|
+ if (prop.prk_plce_nmbr) {
|
|
|
+ iwContent +=`<div class="row">
|
|
|
+ <div>주차가능면수</div>
|
|
|
+ <div class="remndr_prk_cmprt_co">- 대</div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ iwContent +=`<div class="row">
|
|
|
<div>구분</div>
|
|
|
<div title="구분 : ${prop.parking_type_desc}">${prop.parking_type_desc}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div>기본요금</div>
|
|
|
<div title="기본요금 : ${prop.parking_fee_type_desc}">${prop.parking_fee_type_desc}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>운영시간</div>
|
|
|
+ <div title="운영시간 : ${prop.parking_oper_time}">${prop.parking_oper_time}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div>주소</div>
|
|
|
@@ -1715,6 +1870,12 @@ class MapHandler {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ // kakao.maps.event.addListener(this.map, 'bounds_changed', function() {
|
|
|
+ // if (_MarkerHandle.isDraw('traffic')) {
|
|
|
+ // getVertex();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
/**
|
|
|
* 맵 클릭 이벤트
|
|
|
*/
|
