|
|
@@ -0,0 +1,1878 @@
|
|
|
+let _size = [48, 48, 48, 48, 40, 32, 24, 22, 20, 18, 18];
|
|
|
+let _AtrdData = [];
|
|
|
+let _AtrdMap = new Map();
|
|
|
+let selectIncidentId = null;
|
|
|
+
|
|
|
+//시설물 유형
|
|
|
+const _FacilityArray = ['cctv', 'vms', 'intersection', 'incident', 'traffic', 'parking', 'intersectionCamera'];
|
|
|
+
|
|
|
+const g_color = new Map();
|
|
|
+g_color.set('LTC0', '#888888;');
|
|
|
+g_color.set('LTC1', '#2fba2c;');
|
|
|
+g_color.set('LTC2', '#ffc500;');
|
|
|
+g_color.set('LTC3', '#ee0000;');
|
|
|
+
|
|
|
+const CCTV_DISPLAY_TIME = 30 * 1000; // 영상 표출 시간
|
|
|
+const VMS_DISPLAY_TIME = 4 * 1000; // VMS 이미지 표출 시간
|
|
|
+
|
|
|
+let _MapHandler; //카카오 맵 핸들러
|
|
|
+let _Level = 6; //현재 줌레벨
|
|
|
+
|
|
|
+let _methodMap = new Map();
|
|
|
+_methodMap.set('cctv', getCctv);
|
|
|
+_methodMap.set('vms', getVms);
|
|
|
+_methodMap.set('incident', getIncident);
|
|
|
+_methodMap.set('intersection', getIntersection);
|
|
|
+_methodMap.set('traffic', getAtrd);
|
|
|
+_methodMap.set('parking', getParking);
|
|
|
+
|
|
|
+$(()=>{
|
|
|
+ // Map 요소 ID로 생성
|
|
|
+ _MapHandler = new MapHandler('map');
|
|
|
+ _MapHandler.init();
|
|
|
+
|
|
|
+ // 시설물 유형 정보로 flag 값 세팅
|
|
|
+ if (_type) {
|
|
|
+ _MapHandler[_type + 'Flag'] = true;
|
|
|
+ _MapHandler[_type + 'ListFlag'] = true;
|
|
|
+ _methodMap.get(_type)();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 범례 클릭 이벤트 및 색 변환
|
|
|
+ * */
|
|
|
+ $('.legend-bottom button').on('click', function (){
|
|
|
+ const target = $(this);
|
|
|
+ const legendIcon = target.children().eq(0);
|
|
|
+ const isShow = !legendIcon.hasClass('active');
|
|
|
+
|
|
|
+ const id = target.attr('id');
|
|
|
+ const type = id.replace('-legend', '');
|
|
|
+
|
|
|
+ let subType = null;
|
|
|
+
|
|
|
+ if (type === 'intersection') {
|
|
|
+ subType = type + 'Camera';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'traffic') {
|
|
|
+ subType = 'atrd';
|
|
|
+ getVertex();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (_MapHandler[type] && _MapHandler[type].length <= 0) {
|
|
|
+ _methodMap.get(type)();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let toggle = 'hide';
|
|
|
+ let classToggle = 'removeClass';
|
|
|
+ if (isShow === true) {
|
|
|
+ toggle = 'show';
|
|
|
+ classToggle = 'addClass';
|
|
|
+ }
|
|
|
+
|
|
|
+ legendIcon[classToggle]('active');
|
|
|
+ target[classToggle]('active');
|
|
|
+
|
|
|
+ _MapHandler[toggle](type);
|
|
|
+ if (subType) {
|
|
|
+ _MapHandler[toggle](subType);
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 범례 호버 색 변환
|
|
|
+ * */
|
|
|
+ $('.legend-bottom ul li').hover((event)=>{
|
|
|
+ const iconDiv = $(event.currentTarget).children().eq(0);
|
|
|
+ const childDiv = iconDiv.children().eq(0);
|
|
|
+ if (!iconDiv.hasClass('active')) {
|
|
|
+ childDiv.addClass('hover');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (childDiv.hasClass('hover')) {
|
|
|
+ childDiv.removeClass('hover');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (event)=>{
|
|
|
+ const iconDiv = $(event.currentTarget).children().eq(0);
|
|
|
+ const childDiv = iconDiv.children().eq(0);
|
|
|
+
|
|
|
+ if (!iconDiv.hasClass('active')) {
|
|
|
+ childDiv.removeClass('hover');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (childDiv.hasClass('hover')) {
|
|
|
+ childDiv.removeClass('hover');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 탭 호버 색 변환
|
|
|
+ * */
|
|
|
+ $('.left-list-area .list-tab > li').hover((event)=>{
|
|
|
+ const iconDiv = $(event.currentTarget);
|
|
|
+ const childDiv = iconDiv.children().eq(0);
|
|
|
+ if (!iconDiv.hasClass('active')) {
|
|
|
+ childDiv.addClass('hover');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (childDiv.hasClass('hover')) {
|
|
|
+ childDiv.removeClass('hover');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (event)=>{
|
|
|
+ const iconDiv = $(event.currentTarget);
|
|
|
+ const childDiv = iconDiv.children().eq(0);
|
|
|
+ if (!iconDiv.hasClass('active')) {
|
|
|
+ childDiv.removeClass('hover');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (childDiv.hasClass('hover')) {
|
|
|
+ childDiv.removeClass('hover');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ let _MarkerArr = [];
|
|
|
+ $('.tab-title > div').on('click', function(){
|
|
|
+ const $spot = $('.list-content.spot');
|
|
|
+ const $list = $('.list-content.list');
|
|
|
+ let searchType = $('.tab-title > div.active').text();
|
|
|
+ if (searchType === $(this).text()) return;
|
|
|
+ $('.tab-title > div').toggleClass("active");
|
|
|
+ searchType = $(this).text();
|
|
|
+ let list;
|
|
|
+ let spot;
|
|
|
+ if (searchType === '지점 검색') {
|
|
|
+ list = 'none';
|
|
|
+ spot = 'block';
|
|
|
+ $spot.html("");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ list = 'block';
|
|
|
+ spot = 'none';
|
|
|
+ $('.list-content.list > li').css('display', 'block');
|
|
|
+ }
|
|
|
+
|
|
|
+ $('#search-box').val("");
|
|
|
+ $list.css('display', list);
|
|
|
+ $spot.css('display', spot);
|
|
|
+ if (_MarkerArr.length > 0) {
|
|
|
+ _MarkerArr.forEach((obj)=>{
|
|
|
+ obj.setMap(null);
|
|
|
+ });
|
|
|
+ _MarkerArr = [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ $('#search-box').on('keyup', function () {
|
|
|
+ const searchType = $('.tab-title > div.active').text();
|
|
|
+ const searchText = $(this).val();
|
|
|
+
|
|
|
+ if (searchType === '리스트') {
|
|
|
+ const $list = $('.list-content.list > li');
|
|
|
+ if (!$list.length) return;
|
|
|
+
|
|
|
+ for (let ii = 0; ii < $list.length; ii++) {
|
|
|
+ const li = $list.eq(ii);
|
|
|
+ if ($(this).val().length === 0) {
|
|
|
+ li.css('display', 'block');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ let text = $('.list-content.list > li').eq(ii).text().toLowerCase();
|
|
|
+ if (text.includes(searchText.toLowerCase())) {
|
|
|
+ li.css('display', 'block');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ li.css('display', 'none');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (_MarkerArr.length > 0) {
|
|
|
+ _MarkerArr.forEach((obj)=>{
|
|
|
+ obj.setMap(null);
|
|
|
+ });
|
|
|
+ _MarkerArr = [];
|
|
|
+ }
|
|
|
+ $('.list-content.spot').html("");
|
|
|
+ if (!searchText || !searchText.trim()) return;
|
|
|
+ $.ajax({
|
|
|
+ url: 'https://dapi.kakao.com/v2/local/search/address.json',
|
|
|
+ headers: { 'Authorization': 'KakaoAK 4896b94398b96949d349881d004835cf'},
|
|
|
+ data :{
|
|
|
+ query : searchText,
|
|
|
+ },
|
|
|
+ type: 'GET'
|
|
|
+ }).done(function(data) {
|
|
|
+ if (data && data.documents.length > 0) {
|
|
|
+ let str = "";
|
|
|
+ const setMap = new Map();
|
|
|
+
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ let minX;
|
|
|
+ let minY;
|
|
|
+ let maxX;
|
|
|
+ let maxY;
|
|
|
+ let idx = 0;
|
|
|
+ data.documents.forEach((obj)=>{
|
|
|
+ if (!setMap.get(obj.address_name) && obj.address_name.includes("경북 포항시")) {
|
|
|
+ idx++;
|
|
|
+ let addr = obj.address_name;
|
|
|
+ if (obj.x && obj.y) {
|
|
|
+ const position = getKakaoPosition(obj.y, obj.x);
|
|
|
+ let marker = new kakao.maps.Marker({
|
|
|
+ position : position,
|
|
|
+ title : addr ,
|
|
|
+ content : addr
|
|
|
+ });
|
|
|
+
|
|
|
+ new kakao.maps.event.addListener(marker, 'click', function() {
|
|
|
+ moveLocation(obj.x, obj.y, idx);
|
|
|
+ })
|
|
|
+ if (!minX) {
|
|
|
+ minX = obj.x;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!maxX) {
|
|
|
+ maxX = obj.x;
|
|
|
+ }
|
|
|
+ if (!minY) {
|
|
|
+ minY = obj.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!maxY) {
|
|
|
+ maxY = obj.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ minX = minX <= obj.x ? minX : obj.x;
|
|
|
+ maxX = maxX >= obj.x ? maxX : obj.x;
|
|
|
+ minY = minY <= obj.y ? minY : obj.y;
|
|
|
+ maxY = maxY >= obj.y ? maxY : obj.y;
|
|
|
+
|
|
|
+ marker.setMap(_MapHandler.map);
|
|
|
+ _MarkerArr.push(marker);
|
|
|
+ setMap.set(addr, obj);
|
|
|
+
|
|
|
+ str+= `<li id="spot-${idx}" onclick="moveLocation(${obj.x}, ${obj.y}, ${idx})">
|
|
|
+ ${obj.address_name}
|
|
|
+ </li>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (minX && minY && maxX && maxY) {
|
|
|
+ bounds.extend(new kakao.maps.LatLng(minY, minX));
|
|
|
+ bounds.extend(new kakao.maps.LatLng(maxY, maxX));
|
|
|
+ _MapHandler.map.setBounds(bounds);
|
|
|
+ $('.list-content.spot').html(str);
|
|
|
+ getVertex();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+});
|
|
|
+
|
|
|
+/**
|
|
|
+ * 간선도로 마커 레벨별 이미지 보이기 감추기
|
|
|
+ */
|
|
|
+function atrdMarkerResize() {
|
|
|
+ let level = _Level;
|
|
|
+
|
|
|
+ let atrdArr = _MapHandler['atrd'];
|
|
|
+ atrdArr.forEach((atrd)=>{
|
|
|
+ setMarkerImage(atrd, atrd.obj.drct_cd, true);
|
|
|
+ });
|
|
|
+
|
|
|
+ if (level === 3) {
|
|
|
+ level = 4;
|
|
|
+ }
|
|
|
+ if (level >= 8) {
|
|
|
+ level = 7;
|
|
|
+ }
|
|
|
+ else if (level >= 6) {
|
|
|
+ level = 6;
|
|
|
+ }
|
|
|
+
|
|
|
+ const atrdInfo = _AtrdMap.get(level.toString());
|
|
|
+ if (atrdInfo) {
|
|
|
+ _AtrdData = [];
|
|
|
+ let upHillArr = [];
|
|
|
+ let downHillArr = [];
|
|
|
+ const $selectedLi = $(".left-list-area .list-content.list > li.click");
|
|
|
+ let id;
|
|
|
+ let idArr;
|
|
|
+ if ($selectedLi[0]) {
|
|
|
+ id = $selectedLi.attr('id');
|
|
|
+ }
|
|
|
+ if (id) {
|
|
|
+ idArr = id.split("_");
|
|
|
+ }
|
|
|
+ atrdInfo.forEach((atrd)=>{
|
|
|
+ if (atrd.atrd_id.toString() === idArr[1] || atrd.atrd_id.toString() === idArr[2]) {
|
|
|
+ _AtrdData.push(atrd);
|
|
|
+
|
|
|
+ if (atrd.atrd_id.toString() === idArr[1]) {
|
|
|
+ upHillArr.push(atrd);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ downHillArr.push(atrd);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (upHillArr[0]) {
|
|
|
+ let upHillX = upHillArr[0].x_crdn_arr.split(',')[0];
|
|
|
+ let upHillY = upHillArr[0].y_crdn_arr.split(',')[0];
|
|
|
+ atrdArr[0].marker.setPosition(getKakaoPosition(upHillY, upHillX));
|
|
|
+ }
|
|
|
+
|
|
|
+ if (downHillArr[0]) {
|
|
|
+ let downHillX = downHillArr[0].x_crdn_arr.split(',')[0];
|
|
|
+ let downHillY = downHillArr[0].y_crdn_arr.split(',')[0];
|
|
|
+ atrdArr[1].marker.setPosition(getKakaoPosition(downHillY, downHillX));
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 스마트교차로 카메라 레벨별 이미지 보이기 감추기
|
|
|
+ */
|
|
|
+function intersectionCameraChangeWidthZoomLevel() {
|
|
|
+ const level = _Level;
|
|
|
+ const size = [48, 48, 48]
|
|
|
+ const levelSize = size[level];
|
|
|
+ const type = 'intersectionCamera';
|
|
|
+ const markerArr = _MapHandler[type];
|
|
|
+ const map = _MapHandler.map;
|
|
|
+ if (markerArr.length > 0) {
|
|
|
+ markerArr.forEach((obj) => {
|
|
|
+ const content = $('<div title='+obj.NAME+'>');
|
|
|
+ content.css(
|
|
|
+ {
|
|
|
+ width: levelSize+ 'px',
|
|
|
+ height: levelSize+ 'px',
|
|
|
+ backgroundImage:'url(/images/icon/intersection-cctv.png)',
|
|
|
+ backgroundSize : levelSize+'px '+levelSize+'px',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ backgroundPosition : 'center',
|
|
|
+ transform : 'rotate(' + obj.obj.cmra_angn +'deg)',
|
|
|
+ cursor : 'pointer'
|
|
|
+ });
|
|
|
+
|
|
|
+ obj.marker.setContent(content[0]);
|
|
|
+ content.on('click', ()=> {
|
|
|
+ _MapHandler.click(type, obj.ID);
|
|
|
+ });
|
|
|
+
|
|
|
+ if (level <= 2 && _MapHandler['intersectionFlag']) {
|
|
|
+ obj.marker.setMap(map);
|
|
|
+ obj.polyline.setMap(map);
|
|
|
+ } else {
|
|
|
+ obj.marker.setMap(null);
|
|
|
+ obj.polyline.setMap(null);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 스마트교차로 레벨별 이미지 보이기 감추기
|
|
|
+ */
|
|
|
+function intersectionMarkerChangeWithZoomLevel() {
|
|
|
+ const level = _Level;
|
|
|
+ if (_MapHandler['intersection'].length > 0) {
|
|
|
+ _MapHandler['intersection'].forEach((obj)=>{
|
|
|
+ setMarkerImage(obj, "", false);
|
|
|
+ if (level > 2 && _MapHandler['intersectionFlag']) {
|
|
|
+ obj.marker.setVisible(true);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ obj.marker.setVisible(false);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 맵 레벨별 이미지 변환
|
|
|
+ * @param array
|
|
|
+ */
|
|
|
+function markerSizeChangeWithZoomLevel(array) {
|
|
|
+ if (array && array.length > 0) {
|
|
|
+ array.forEach((obj)=>{
|
|
|
+ if (obj.isClick) {
|
|
|
+ setMarkerImage(obj, 2, false)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setMarkerImage(obj, 1, false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 지점 클릭 위치 이동
|
|
|
+ * @param xCoordinate x좌표
|
|
|
+ * @param yCoordinate y좌표
|
|
|
+ * @param listIndex 지점 선택 인덱스
|
|
|
+ */
|
|
|
+function moveLocation(xCoordinate, yCoordinate, listIndex) {
|
|
|
+ const position = getKakaoPosition(yCoordinate, xCoordinate);
|
|
|
+
|
|
|
+ _MapHandler.map.setCenter(position);
|
|
|
+ _MapHandler.map.setLevel(3);
|
|
|
+ $('.list-content.spot > li.click').removeClass('click');
|
|
|
+ $('#spot-' +listIndex).addClass('click');
|
|
|
+ getVertex();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * cctv 데이터 가져오기
|
|
|
+ */
|
|
|
+function getCctv() {
|
|
|
+ getDataAsync('/api/traffic/cctv-list', 'POST', null, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ receiveFacilityData(jsonData, TbCCtvObj,'cctv');
|
|
|
+ }
|
|
|
+ }, null);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * vms 데이터 가져오기
|
|
|
+ */
|
|
|
+function getVms() {
|
|
|
+ getDataAsync('/api/traffic/vms-list', 'POST', null, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ jsonData.sort((a, b)=>{
|
|
|
+ return a.vms_nm > b.vms_nm ? 1 : a.vms_nm < b.vms_nm ? -1 : 0;
|
|
|
+ })
|
|
|
+ receiveFacilityData(jsonData, TbVmsObj,'vms');
|
|
|
+ }
|
|
|
+ }, null);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 돌발정보
|
|
|
+ */
|
|
|
+function getIncident () {
|
|
|
+ getDataAsync('/api/traffic/incident-list', 'POST', null, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ receiveFacilityData(jsonData, TbIncdObj, 'incident');
|
|
|
+ if (selectIncidentId) {
|
|
|
+ _MapHandler.click('incident', selectIncidentId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, null);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 스마트교차로
|
|
|
+ */
|
|
|
+function getIntersection() {
|
|
|
+ getDataAsync('/api/itcs/list', 'POST', null, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ jsonData.sort((a, b)=>{
|
|
|
+ return a.ixr_nm > b.ixr_nm ? 1 : a.ixr_nm < b.ixr_nm ? -1 : 0;
|
|
|
+ });
|
|
|
+ let data = [];
|
|
|
+ jsonData.forEach((obj)=>{
|
|
|
+ if(obj.detail.length > 0) {
|
|
|
+ data.push(obj);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ receiveFacilityData(data, IntersectionObj, 'intersection');
|
|
|
+ }
|
|
|
+ }, null);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 주차정보
|
|
|
+ */
|
|
|
+function getParking() {
|
|
|
+ getDataAsync('/api/traffic/parking-list', 'POST', null, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ receiveFacilityData(jsonData, TbParkingObj, 'parking');
|
|
|
+ }
|
|
|
+ }, null);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 간선도로 정보
|
|
|
+ */
|
|
|
+function getAtrd() {
|
|
|
+ getDataAsync("/api/traffic/atrd-vertex-all", "POST", null, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ _AtrdMap = new Map();
|
|
|
+ jsonData.forEach((obj)=>{
|
|
|
+ _AtrdMap.set(obj.level, obj.list);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, null);
|
|
|
+
|
|
|
+ getDataAsync('/api/traffic/atrd-list', 'POST', null, null, (jsonData)=>{
|
|
|
+ if (jsonData) {
|
|
|
+ let listStr = "";
|
|
|
+ let mobileStr = "";
|
|
|
+ let atrdData = [];
|
|
|
+
|
|
|
+ for (let key in jsonData){
|
|
|
+ atrdData.push({
|
|
|
+ name : key,
|
|
|
+ list : jsonData[key]
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ atrdData.sort((a,b)=>{
|
|
|
+ return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
|
|
|
+ });
|
|
|
+
|
|
|
+ atrdData.forEach((obj)=>{
|
|
|
+ let upHillId = null;
|
|
|
+ let downHillId = null;
|
|
|
+ const list = obj.list;
|
|
|
+ if (list && list.length === 2) {
|
|
|
+ upHillId = list[0].atrd_id;
|
|
|
+ downHillId = list[1].atrd_id;
|
|
|
+
|
|
|
+ if (list[0].drct_cd === "1") {
|
|
|
+ upHillId = list[1].atrd_id;
|
|
|
+ downHillId = list[0].atrd_id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ listStr += `<li id="atrd_${upHillId}_${downHillId}" onclick="atrdClickEvent('${upHillId}', '${downHillId}')">${obj.name}</li>`
|
|
|
+ mobileStr += `<option value="${upHillId}_${downHillId}">${obj.name}</option>`
|
|
|
+ });
|
|
|
+
|
|
|
+ const $mobileSelect = $('.mobile-select');
|
|
|
+ $mobileSelect.append($(mobileStr));
|
|
|
+ $mobileSelect.on('change', function(){
|
|
|
+ const ids = $(this).val();
|
|
|
+ if (ids && ids !== '-') {
|
|
|
+ const idArr = ids.split('_');
|
|
|
+ atrdClickEvent(idArr[0], idArr[1]);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const array = _MapHandler['atrd'];
|
|
|
+ if (array.length > 0) {
|
|
|
+ array.forEach((atrd)=>{
|
|
|
+ atrd.close();
|
|
|
+ })
|
|
|
+ _MapHandler['atrd'] = [];
|
|
|
+ getVertex();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const listSection = $('.left-list-area .list-content.list');
|
|
|
+ listSection.empty();
|
|
|
+ listSection.html(listStr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ getVertex();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 소통정보 가져오기
|
|
|
+ */
|
|
|
+function getVertex() {
|
|
|
+ const array = _MapHandler['traffic'];
|
|
|
+ if (array.length > 0) {
|
|
|
+ array.forEach((obj) => {
|
|
|
+ obj.setVisibleMarker(false);
|
|
|
+ if (obj.infoWindow) {
|
|
|
+ obj.infoWindow.setMap(null);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _MapHandler['traffic'] = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ let level = _MapHandler.map.getLevel();
|
|
|
+ const bounds = _MapHandler.map.getBounds();
|
|
|
+ const swLatLng = bounds.getSouthWest();
|
|
|
+ const neLatLng = bounds.getNorthEast();
|
|
|
+ const data = {
|
|
|
+ levl : level,
|
|
|
+ swLat : swLatLng.getLat(),
|
|
|
+ neLat : neLatLng.getLat(),
|
|
|
+ swLng : swLatLng.getLng(),
|
|
|
+ neLng : neLatLng.getLng(),
|
|
|
+ }
|
|
|
+ if (_MapHandler.atrd && _MapHandler.atrd.length > 0) {
|
|
|
+ _MapHandler.atrd.forEach((atrd)=>{
|
|
|
+ atrd.cnt = 0;
|
|
|
+ atrd.trvl_hh = 0;
|
|
|
+ atrd.sped = 0;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ getDataAsync('/api/traffic/vertex-list', 'POST', data, null, (jsonData)=>{
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ jsonData.forEach((obj)=>{
|
|
|
+ const trafficObj = new TrafficObj(obj);
|
|
|
+ if (_AtrdData.length > 0) {
|
|
|
+
|
|
|
+ _AtrdData.forEach((atrd)=>{
|
|
|
+ if (atrd.road_id.toString() === trafficObj.ID.toString()) {
|
|
|
+ let sped = Number(obj.sped);
|
|
|
+ let trvl_hh = Number(obj.trvl_hh);
|
|
|
+ const atrdObj = _MapHandler.getSelectObj(_MapHandler['atrd'], atrd.atrd_id);
|
|
|
+ if (!isNaN(sped)) {
|
|
|
+ atrdObj.sped += sped;
|
|
|
+ }
|
|
|
+ if (!isNaN(trvl_hh)) {
|
|
|
+ atrdObj.trvl_hh += trvl_hh;
|
|
|
+ }
|
|
|
+ atrdObj.cnt += 1;
|
|
|
+ trafficObj.polyBackLine.setOptions({
|
|
|
+ strokeColor : 'black',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ _MapHandler['traffic'].push(trafficObj);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 간선도로 클릭 이벤트
|
|
|
+ * @param AupHillId 상행 ID
|
|
|
+ * @param AdownHillId 하행 ID
|
|
|
+ */
|
|
|
+function atrdClickEvent(AupHillId, AdownHillId) {
|
|
|
+ let atrdArr = _MapHandler['atrd'];
|
|
|
+ if (atrdArr.length > 0) {
|
|
|
+ atrdArr.forEach((atrd)=>{
|
|
|
+ atrd.close();
|
|
|
+ });
|
|
|
+ _MapHandler['atrd'] = [];
|
|
|
+ }
|
|
|
+ const selectedObj = _MapHandler.selectedObj;
|
|
|
+ if (selectedObj) {
|
|
|
+ _MapHandler.close(selectedObj.type, selectedObj.ID);
|
|
|
+ }
|
|
|
+ _AtrdData = [];
|
|
|
+ const $selectedLi = $('.left-list-area .list-content.list > li.click');
|
|
|
+ if ($selectedLi) {
|
|
|
+ $selectedLi.removeClass('click');
|
|
|
+ }
|
|
|
+ const $selectLi = $('#atrd_' + AupHillId + "_" + AdownHillId);
|
|
|
+ $selectLi.addClass('click');
|
|
|
+ $selectLi.focus();
|
|
|
+
|
|
|
+ //상행, 하행 ID 가 있다면 실행
|
|
|
+ if (AupHillId && AdownHillId) {
|
|
|
+ const upHillArr = [];
|
|
|
+ const downHillArr = [];
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+
|
|
|
+ //전체 간선도로 목록을 담은 Map 에서 기준값을 5레벨로 잡아 포커스 좌표를 설정
|
|
|
+ if (_AtrdMap.get("5")) {
|
|
|
+ const basicAtrd = _AtrdMap.get("5");
|
|
|
+ for (let idx in basicAtrd) {
|
|
|
+ const obj = basicAtrd[idx];
|
|
|
+ if (obj.atrd_id.toString() === AupHillId || obj.atrd_id.toString() === AdownHillId) {
|
|
|
+ bounds.extend(new kakao.maps.LatLng(obj.y_crdn_min, obj.x_crdn_min));
|
|
|
+ bounds.extend(new kakao.maps.LatLng(obj.y_crdn_max, obj.x_crdn_max));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _MapHandler.map.setBounds(bounds);
|
|
|
+
|
|
|
+ //전체 레벨이 다있는게 아니므로 로드 레벨은 재설정
|
|
|
+ let level = _Level;
|
|
|
+ if (level >= 8) {
|
|
|
+ level = 7;
|
|
|
+ }
|
|
|
+ else if (level >= 6) {
|
|
|
+ level = 6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 범위를 포커스 하게 되면 레벨이 변경되므로 변경 된 레벨의 간선도로 목록에서
|
|
|
+ * 상행, 하행 ID가 포함된 데이터 갖고오며 상행, 하행 데이터 따로 구분
|
|
|
+ */
|
|
|
+ const atrdInfo = _AtrdMap.get(level.toString());
|
|
|
+ if (atrdInfo) {
|
|
|
+ atrdInfo.forEach((atrd)=>{
|
|
|
+ if (atrd.atrd_id.toString() === AupHillId.toString() || atrd.atrd_id.toString() === AdownHillId.toString()) {
|
|
|
+ _AtrdData.push(atrd);
|
|
|
+
|
|
|
+ if (atrd.atrd_id === AupHillId) {
|
|
|
+ upHillArr.push(atrd);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ downHillArr.push(atrd);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //레벨이 변경됐으므로 다시한번 버텍스를 초기화해준다
|
|
|
+ getVertex();
|
|
|
+
|
|
|
+ //각 상행 하행의 첫번째 좌표를 가지고 상행, 하행 아이콘을 생성 하며 객체는 array에 보관해둠
|
|
|
+ if (upHillArr[0]) {
|
|
|
+ const upHillObj = new TbAtrdObj(upHillArr[0]);
|
|
|
+ _MapHandler['atrd'].push(upHillObj);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (downHillArr[0]) {
|
|
|
+ const downHillObj = new TbAtrdObj(downHillArr[0]);
|
|
|
+ _MapHandler['atrd'].push(downHillObj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 간선도로 상,하행 마커 그리기
|
|
|
+ * @param src 상, 하행 코드
|
|
|
+ * @param lat X 좌표
|
|
|
+ * @param lng Y 좌표
|
|
|
+ * @param name 명칭
|
|
|
+ * @returns {daum.maps.Marker} 생성 마커
|
|
|
+ */
|
|
|
+function drawAtrdMakrer(src, lng, lat, name) {
|
|
|
+ let imageSize;
|
|
|
+ let imageOption;
|
|
|
+ let imageSrc = '/images/icon/atrd' + src + '.png';
|
|
|
+
|
|
|
+ //레벨별 사이즈를 다르게 표출
|
|
|
+ const level = _Level;
|
|
|
+ let size = 48;
|
|
|
+ if (level >= 7) {
|
|
|
+ size = 24;
|
|
|
+ }
|
|
|
+
|
|
|
+ imageSize = new kakao.maps.Size(size, size);
|
|
|
+ imageOption = {
|
|
|
+ offset: new kakao.maps.Point(size/2, size),
|
|
|
+ };
|
|
|
+
|
|
|
+ let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
|
|
|
+ let markerPosition = new kakao.maps.LatLng(lng, lat);
|
|
|
+
|
|
|
+ let atrdSideMarker = new kakao.maps.Marker({
|
|
|
+ position: markerPosition,
|
|
|
+ image: markerImage,
|
|
|
+ zIndex: 5,
|
|
|
+ title: name,
|
|
|
+ });
|
|
|
+ return atrdSideMarker;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 소통정보 Object
|
|
|
+ */
|
|
|
+class TrafficObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.roadway_id;
|
|
|
+ this.NAME = obj.roadway_nm;
|
|
|
+ this.obj = obj;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.polyLine = null;
|
|
|
+ this.polyBackLine = null;
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ const _self = this;
|
|
|
+ const trafficObj = this.obj;
|
|
|
+ const xArray = trafficObj.x_crdn.split(",");
|
|
|
+ const yArray = trafficObj.y_crdn.split(",");
|
|
|
+ const linePath = [];
|
|
|
+ for (let ii = 0; ii < xArray.length; ii++) {
|
|
|
+ const x_crdn = Number(xArray[ii]);
|
|
|
+ const y_crdn = Number(yArray[ii]);
|
|
|
+ const coordinates = getKakaoPosition(y_crdn, x_crdn);
|
|
|
+ linePath.push(coordinates);
|
|
|
+ }
|
|
|
+
|
|
|
+ let strokeWeight = 5;
|
|
|
+ let strokeWeightBack = 7;
|
|
|
+ const level = _Level;
|
|
|
+
|
|
|
+ if (level === 3) {
|
|
|
+ strokeWeightBack = 6;
|
|
|
+ } else if (level === 5 || level === 4) {
|
|
|
+ strokeWeight = 3;
|
|
|
+ strokeWeightBack = 5;
|
|
|
+ } else if (level >= 6) {
|
|
|
+ strokeWeight = 2;
|
|
|
+ strokeWeightBack = 4;
|
|
|
+ }
|
|
|
+ this.polyBackLine = new kakao.maps.Polyline({
|
|
|
+ path: linePath, // 선을 구성하는 좌표배열 입니다
|
|
|
+ strokeWeight: strokeWeightBack, // 선의 두께 입니다
|
|
|
+ strokeColor: '#eeeeee', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 1
|
|
|
+ });
|
|
|
+ this.polyLine = new kakao.maps.Polyline({
|
|
|
+ path: linePath, // 선을 구성하는 좌표배열 입니다
|
|
|
+ strokeWeight: strokeWeight, // 선의 두께 입니다
|
|
|
+ strokeColor: g_color.get(trafficObj.cmtr_grad_cd), // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 2
|
|
|
+ });
|
|
|
+
|
|
|
+ this.setVisibleMarker(_MapHandler['trafficFlag']);
|
|
|
+
|
|
|
+ new kakao.maps.event.addListener(this.polyLine, 'mouseover', function (event) {
|
|
|
+
|
|
|
+ this.setOptions({strokeColor: '#0000FF'});
|
|
|
+ const iwContent =
|
|
|
+ `<div class="trafficPop">
|
|
|
+ <div class="traffic-speed ${trafficObj.cmtr_grad_cd}">
|
|
|
+ <span class="traffic-name">${_self.NAME}</span>
|
|
|
+ <span class="traffic-speed-info border-back ${trafficObj.cmtr_grad_cd}">${trafficObj.grad_nm}</span>
|
|
|
+ </div>
|
|
|
+ <div class="traffic-info">
|
|
|
+ <span>${trafficObj.strt_nm_node} → ${trafficObj.end_nm_node}</span>
|
|
|
+ <br>
|
|
|
+ <span>소요시간 : </span>
|
|
|
+ <span class="${trafficObj.cmtr_grad_cd}">약 ${textFormat(trafficObj.trvl_hh)}분 </span>
|
|
|
+ <span> 속도 : </span>
|
|
|
+ <span class="${trafficObj.cmtr_grad_cd}">약 ${textFormat(trafficObj.sped)}km/h</span>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ _self.infoWindow = new kakao.maps.CustomOverlay({
|
|
|
+ map: _MapHandler.map,
|
|
|
+ clickable: true,
|
|
|
+ position: event.latLng,
|
|
|
+ content: iwContent,
|
|
|
+ xAnchor: -0.1,
|
|
|
+ yAnchor: 1.1,
|
|
|
+ zIndex: 4
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ daum.maps.event.addListener(this.polyLine, 'mouseout', function () {
|
|
|
+ this.setOptions({strokeColor: g_color.get(trafficObj.cmtr_grad_cd)});
|
|
|
+ if (_self.infoWindow != null) _self.infoWindow.setMap(null);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ const isShow = isVisible ? _MapHandler.map : null;
|
|
|
+ this.polyBackLine.setMap(isShow);
|
|
|
+ this.polyLine.setMap(isShow);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 간선도로 Object
|
|
|
+ */
|
|
|
+class TbAtrdObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.atrd_id;
|
|
|
+ this.NAME = obj.atrd_nm;
|
|
|
+ this.X_CRDN = null;
|
|
|
+ this.Y_CRDN = null;
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.imgSrc = '/images/icon/atrd';
|
|
|
+ this.isClick = false;
|
|
|
+ this.sped = 0;
|
|
|
+ this.trvl_hh = 0;
|
|
|
+ this.cnt = 0;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ if (this.obj.x_crdn_arr) {
|
|
|
+ this.X_CRDN = this.obj.x_crdn_arr.split(",")[0];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.obj.y_crdn_arr) {
|
|
|
+ this.Y_CRDN = this.obj.y_crdn_arr.split(",")[0];
|
|
|
+ }
|
|
|
+ const name = this.NAME + " [" + this.obj.drct_nm + "]";
|
|
|
+ this.marker = drawAtrdMakrer(this.obj.drct_cd, this.Y_CRDN, this.X_CRDN, name);
|
|
|
+ this.click();
|
|
|
+ // let _self = this;
|
|
|
+ // new kakao.maps.event.addListener(this.marker, 'mouseover', function (event) {
|
|
|
+ // let position = getKakaoPosition(_self.Y_CRDN, _self.X_CRDN);
|
|
|
+ // const iwContent =
|
|
|
+ // `<div class="trafficPop">
|
|
|
+ // <div>
|
|
|
+ // <span class="traffic-name">${_self.NAME}</span>
|
|
|
+ // <span>[${_self.obj.drct_nm}]</span>
|
|
|
+ // </div>
|
|
|
+ // <div class="traffic-info">
|
|
|
+ // <span>평균속도 : ${Math.round(_self.sped/_self.cnt)} km/h</span><br>
|
|
|
+ // <span>통행시간 : ${textFormat(Math.round(_self.trvl_hh/_self.trvl_hh))}분 </span>
|
|
|
+ // </div>
|
|
|
+ // </div>`;
|
|
|
+ // _self.infoWindow = new kakao.maps.CustomOverlay({
|
|
|
+ // map: _MapHandler.map,
|
|
|
+ // clickable: true,
|
|
|
+ // position: position,
|
|
|
+ // content: iwContent,
|
|
|
+ // xAnchor: -0.1,
|
|
|
+ // yAnchor: 1.1,
|
|
|
+ // zIndex: 4
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // new kakao.maps.event.addListener(this.marker, 'mouseout', function (event) {
|
|
|
+ // _self.infoWindow.setMap(null);
|
|
|
+ // })
|
|
|
+ }
|
|
|
+
|
|
|
+ click() {
|
|
|
+ this.setVisibleMarker(true);
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ let visible = isVisible ? _MapHandler.map : null;
|
|
|
+ this.marker.setMap(visible);
|
|
|
+ this.isClick = isVisible;
|
|
|
+ }
|
|
|
+
|
|
|
+ close() {
|
|
|
+ this.setVisibleMarker(false);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * CCTV Object
|
|
|
+ */
|
|
|
+class TbCCtvObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.cctv_mngm_nmbr;
|
|
|
+ this.NAME = obj.istl_lctn_nm;
|
|
|
+ this.X_CRDN = obj.x_crdn;
|
|
|
+ this.Y_CRDN = obj.y_crdn;
|
|
|
+ this.URL = obj.strm_http_addr;
|
|
|
+ this.type = 'cctv';
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.iwContent = null;
|
|
|
+ this.isClick = false;
|
|
|
+ this.imgSrc = '/images/icon/cctv';
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.marker = createMarker(this, 'cctv');
|
|
|
+ this.iwContent = `<div class="cctv-info-window">
|
|
|
+ <div class="title">
|
|
|
+ <div class="cctv-name-${this.ID}">${this.NAME}</div>
|
|
|
+ <div onclick="infoWindowEvent('cctv', '${this.ID}', 'close')">X</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div>
|
|
|
+ <video id="video-${this.ID}" class="video-js" playsinline style="width: 100%; height: 100%;"></video>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>※ CCTV영상은 30초간 제공됩니다.</div>
|
|
|
+ <div class="continue-play">계속재생</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ this.marker.setVisible(isVisible);
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+/**
|
|
|
+ * Parking Object
|
|
|
+ */
|
|
|
+class TbParkingObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.parking_id;
|
|
|
+ this.NAME = obj.parking_nm;
|
|
|
+ this.X_CRDN = obj.x_crdn;
|
|
|
+ this.Y_CRDN = obj.y_crdn;
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.iwContent = null;
|
|
|
+ this.isClick = false;
|
|
|
+ this.imgSrc = '/images/icon/parking';
|
|
|
+ this.timer = null;
|
|
|
+ this.type = 'parking';
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.marker = createMarker(this, 'parking');
|
|
|
+ this.iwContent = `<div class="parking-info-window">
|
|
|
+ <div class="title">
|
|
|
+ <div class="parking-name-${this.ID}">${this.NAME}</div>
|
|
|
+ <div onclick="infoWindowEvent('parking', '${this.ID}', 'close')"></div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="row">
|
|
|
+ <div>주차면수</div>
|
|
|
+ <div title="주차면수 : ${this.obj.parking_num} 대">${this.obj.parking_num} 대</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>구분</div>
|
|
|
+ <div title="구분 : ${this.obj.parking_type_desc}">${this.obj.parking_type_desc}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>기본요금</div>
|
|
|
+ <div title="기본요금 : ${this.obj.parking_fee_type_desc}">${this.obj.parking_fee_type_desc}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>주소</div>
|
|
|
+ <div title="주소 : ${this.obj.parking_addr}">${this.obj.parking_addr}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ this.marker.setVisible(isVisible);
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * VMS Object
|
|
|
+ */
|
|
|
+class TbVmsObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.vms_ctlr_nmbr;
|
|
|
+ this.NAME = obj.vms_nm;
|
|
|
+ this.X_CRDN = obj.x_crdn;
|
|
|
+ this.Y_CRDN = obj.y_crdn;
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.iwContent = null;
|
|
|
+ this.isClick = false;
|
|
|
+ this.imgSrc = '/images/icon/vms';
|
|
|
+ this.timer = null;
|
|
|
+ this.phaseArray = [];
|
|
|
+ this.type = 'vms';
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.marker = createMarker(this, 'vms');
|
|
|
+ this.phaseArray = [];
|
|
|
+ let width;
|
|
|
+ let height;
|
|
|
+ let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
|
|
+ switch (this.obj.vms_type_cd) {
|
|
|
+ case 'VMC1':
|
|
|
+ width = 400;
|
|
|
+ height = 64;
|
|
|
+ break;
|
|
|
+ case 'VMC2':
|
|
|
+ width = 384;
|
|
|
+ height = 64;
|
|
|
+ break;
|
|
|
+ case 'VMC3':
|
|
|
+ width = 288;
|
|
|
+ height = 160;
|
|
|
+ break;
|
|
|
+ case 'VMC4':
|
|
|
+ width = 256;
|
|
|
+ height = 192;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ const windowHeight = $(window).height();
|
|
|
+ if (isMobile || windowHeight < 900) {
|
|
|
+ width = width/2;
|
|
|
+ height = height/2;
|
|
|
+ }
|
|
|
+ width = width +'px';
|
|
|
+ height = height + 'px';
|
|
|
+
|
|
|
+ const msg = this.obj.msg;
|
|
|
+
|
|
|
+ if (!msg || msg.length === 0) {
|
|
|
+ width = '256px';
|
|
|
+ height = '50px';
|
|
|
+ }
|
|
|
+
|
|
|
+ let iwContent =
|
|
|
+ `<div class="vms-info-window" style="width: calc(${width} + 10px); height: calc(${height} + 50px);">
|
|
|
+ <div class="title">
|
|
|
+ <div class="vms-name-${this.ID}">${this.NAME}</div>
|
|
|
+ <div onclick="infoWindowEvent('vms', ${this.ID}, 'close')">X</div>
|
|
|
+ </div>
|
|
|
+ <div class="content" style="width: ${width}; height: ${height};">`;
|
|
|
+ if (msg && msg.length > 0) {
|
|
|
+ for (let idx in msg) {
|
|
|
+ let msgObj = msg[idx];
|
|
|
+ let className = '';
|
|
|
+ if (idx === "0") {
|
|
|
+ className = 'active'
|
|
|
+ }
|
|
|
+ iwContent += `<img id="phase-${msgObj.phase}" class="${className}" style="width: ${width}; height: ${height};" src="/api/traffic/vms-dspl-image/${this.ID}/${msgObj.phase}">`;
|
|
|
+ this.phaseArray.push(msgObj.phase);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ iwContent += '표출 이미지 데이터가 없습니다.';
|
|
|
+ }
|
|
|
+ iwContent += `</div></div>`;
|
|
|
+ this.iwContent = iwContent;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ this.marker.setVisible(isVisible);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 돌발정보 Object
|
|
|
+ */
|
|
|
+class TbIncdObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.incd_ocrr_id;
|
|
|
+ this.NAME = obj.incd_titl;
|
|
|
+ this.X_CRDN = obj.x_crdn;
|
|
|
+ this.Y_CRDN = obj.y_crdn;
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.isClick = false;
|
|
|
+ this.imgSrc = '/images/icon/incd';
|
|
|
+ this.iwContent = null;
|
|
|
+ this.type = 'incident';
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.marker = createMarker(this, 'incident');
|
|
|
+ this.iwContent = `<div class="incident-info-window">
|
|
|
+ <div class="title">
|
|
|
+ <div class="incident-name-${this.ID}">${this.NAME}</div>
|
|
|
+ <div onclick="infoWindowEvent('incident', '${this.ID}', 'close')">X</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div>
|
|
|
+ 위치 : ${this.obj.road_nm}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 설명 : ${this.obj.incd_expl}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 기간 : ${this.obj.incd_strt_dt} ~ ${this.obj.incd_end_prar_dt}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ this.marker.setVisible(isVisible);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 스마트 교차로 Object
|
|
|
+ */
|
|
|
+class IntersectionObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.ixr_id;
|
|
|
+ this.NAME = obj.ixr_nm;
|
|
|
+ this.X_CRDN = obj.x_crdn;
|
|
|
+ this.Y_CRDN = obj.y_crdn;
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.isClick = false;
|
|
|
+ this.imgSrc = '/images/icon/intersection';
|
|
|
+ this.detail = [];
|
|
|
+ this.type = 'intersection';
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ let imageSrc = this.imgSrc + '.png', // 마커이미지의 주소입니다
|
|
|
+ size = _size[_Level],
|
|
|
+ imageSize = new kakao.maps.Size(size, size), // 마커이미지의 크기입니다
|
|
|
+ imageOption = {
|
|
|
+ offset: new kakao.maps.Point(size/2, size/2),
|
|
|
+ alt: this.NAME,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
|
|
|
+ let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
|
|
|
+ markerPosition = getKakaoPosition(this.Y_CRDN, this.X_CRDN); // 마커가 표시될 위치입니다
|
|
|
+
|
|
|
+ this.marker = new kakao.maps.Marker(
|
|
|
+ {map: _MapHandler.map, position: markerPosition, image: markerImage, zindex: 10, clickable: true, title : this.NAME}
|
|
|
+ );
|
|
|
+ const level = _Level;
|
|
|
+ const isVisible = (level > 2 && _MapHandler['intersectionFlag']);
|
|
|
+ this.marker.setVisible(isVisible);
|
|
|
+ let _self = this;
|
|
|
+ new kakao.maps.event.addListener(this.marker, 'click', ()=> _MapHandler.click('intersection', _self.ID));
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ if (_Level <= 2) isVisible = false;
|
|
|
+ this.marker.setVisible(isVisible);
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 스마트교차로 카메라 Object
|
|
|
+ */
|
|
|
+class IntersectionCameraObj {
|
|
|
+ constructor(obj) {
|
|
|
+ this.ID = obj.cmra_id + '_' + obj.drct_dvsn_cd;
|
|
|
+ this.NAME = obj.drct_lctn;
|
|
|
+ this.X_CRDN = obj.cmra_x_crdn;
|
|
|
+ this.Y_CRDN = obj.cmra_y_crdn;
|
|
|
+ this.URL = obj.hmpg_cmra_url;
|
|
|
+ this.obj = obj;
|
|
|
+ this.marker = null;
|
|
|
+ this.infoWindow = null;
|
|
|
+ this.iwContent = null;
|
|
|
+ this.isClick = false;
|
|
|
+ this.timer = null;
|
|
|
+ this.polyline = null;
|
|
|
+ this.type = 'intersectionCamera';
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.marker = createIntersectionCameraMarker(this);
|
|
|
+ this.iwContent =
|
|
|
+ `<div class="cctv-info-window">
|
|
|
+ <div class="title">
|
|
|
+ <div class="intersectionCamera-name-${this.ID}">${this.NAME}</div>
|
|
|
+ <div class="close-window" onclick="infoWindowEvent('intersectionCamera', '${this.ID}', 'close')">X</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div>
|
|
|
+ <video id="video-${this.ID}" class="video-js" style="width: 100%; height: 100%;"></video>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>※ CCTV영상은 30초간 제공됩니다.</div>
|
|
|
+ <div class="continue-play">계속재생</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ setVisibleMarker(isVisible) {
|
|
|
+ const visible = isVisible && _Level <= 2 ? _MapHandler.map : null;
|
|
|
+ this.marker.setMap(visible);
|
|
|
+ this.polyline.setMap(visible);
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 인포윈도우 이벤트
|
|
|
+ * @param type 시설물 유형
|
|
|
+ * @param id 요소 ID
|
|
|
+ * @param event 이벤트 종류 (click, close)
|
|
|
+ */
|
|
|
+function infoWindowEvent(type, id, event) {
|
|
|
+ _MapHandler[event](type, id);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+let isHide = false
|
|
|
+
|
|
|
+/**
|
|
|
+ * 좌측 목록 토글 이벤트
|
|
|
+ */
|
|
|
+function toggleEvent() {
|
|
|
+ const $listArea = $('.left-list-area');
|
|
|
+ const $toggleButton = $('.toggle-button');
|
|
|
+
|
|
|
+ if (!isHide) {
|
|
|
+ $toggleButton.animate({
|
|
|
+ left: 0
|
|
|
+ }, 'slow');
|
|
|
+ $listArea .animate({
|
|
|
+ left: -$listArea.width()
|
|
|
+ }, 'slow');
|
|
|
+ $toggleButton.text('>');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $toggleButton.animate({
|
|
|
+ left: $listArea.width()
|
|
|
+ }, 'slow');
|
|
|
+ $listArea .animate({
|
|
|
+ left: 0
|
|
|
+ }, 'slow');
|
|
|
+ $toggleButton.text('<');
|
|
|
+ }
|
|
|
+ isHide = !isHide;
|
|
|
+}
|
|
|
+
|
|
|
+window.addEventListener('resize', function(event) {
|
|
|
+ if ($(this).width() > 450) {
|
|
|
+ const $toggleButton = $('.toggle-button');
|
|
|
+ const $listArea = $('.left-list-area');
|
|
|
+ const left = $toggleButton.offset().left;
|
|
|
+ const listLeft = $listArea.offset().left;
|
|
|
+ if ($(this).width() >= 920) {
|
|
|
+ if (left > 0 && left < 400) {
|
|
|
+ $toggleButton.css('left', 400);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (listLeft > -400 && listLeft < 0) {
|
|
|
+ $listArea.css('left', -400);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (left > 0 && left > 275) {
|
|
|
+ $toggleButton.css('left', 275);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (listLeft < -273) {
|
|
|
+ $listArea.css('left', -273);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+/**
|
|
|
+ * 시설물 마커 초기화
|
|
|
+ * @param obj 시설물 객체
|
|
|
+ * @returns {kakao.maps.Marker}
|
|
|
+ */
|
|
|
+function createMarker(obj, type) {
|
|
|
+ let map = _MapHandler.map;
|
|
|
+ let imageSrc = obj.imgSrc + '1.png', // 마커이미지의 주소입니다
|
|
|
+ size = _size[map.getLevel()],
|
|
|
+ imageSize = new kakao.maps.Size(size, size), // 마커이미지의 크기입니다
|
|
|
+ imageOption = {
|
|
|
+ offset: new kakao.maps.Point(size/2, size/2),
|
|
|
+ alt: obj.NAME,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
|
|
|
+ let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
|
|
|
+ markerPosition = getKakaoPosition(obj.Y_CRDN, obj.X_CRDN); // 마커가 표시될 위치입니다
|
|
|
+
|
|
|
+ let marker = new kakao.maps.Marker(
|
|
|
+ {map: map, position: markerPosition, image: markerImage, zindex: 10, clickable: true, title : obj.NAME}
|
|
|
+ );
|
|
|
+ let flag = _MapHandler[type+'Flag'];
|
|
|
+ marker.setVisible(flag);
|
|
|
+
|
|
|
+ kakao.maps.event.addListener(marker, 'mouseover', function () {
|
|
|
+ if (!obj.isClick) {
|
|
|
+ setMarkerImage(obj, 2, false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ kakao.maps.event.addListener(marker, 'mouseout', function () {
|
|
|
+ if (!obj.isClick) {
|
|
|
+ setMarkerImage(obj, 1, false)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ kakao.maps.event.addListener(marker, 'click', ()=> _MapHandler.click(type, obj.ID));
|
|
|
+
|
|
|
+ return marker;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 스마트 교차로 카메라 마커 초기화
|
|
|
+ * @param obj 스마트 교차로 카메라 객체
|
|
|
+ * @returns {kakao.maps.Marker}
|
|
|
+ */
|
|
|
+function createIntersectionCameraMarker(obj) {
|
|
|
+ const position = getKakaoPosition(obj.Y_CRDN, obj.X_CRDN);
|
|
|
+ const content = $('<div id="camera_'+obj.ID+'" title="'+obj.NAME+'">');
|
|
|
+ const angle = Number(obj.obj.cmra_angn);
|
|
|
+ content.css(
|
|
|
+ {
|
|
|
+ width: '38.45px',
|
|
|
+ height: '38.45px',
|
|
|
+ backgroundImage:'url(/images/icon/intersection-cctv.png)',
|
|
|
+ backgroundSize : '38.45px 38.45px',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ backgroundPosition : 'center',
|
|
|
+ transform : 'rotate(' + angle +'deg)'
|
|
|
+ });
|
|
|
+
|
|
|
+ const marker = new kakao.maps.CustomOverlay({
|
|
|
+ content: content[0],
|
|
|
+ position: position,
|
|
|
+ zindex: 15,
|
|
|
+ });
|
|
|
+
|
|
|
+ const linePath1 = [obj.obj.start_x, obj.obj.start_y]
|
|
|
+ const linePath2 = [obj.obj.end_x, obj.obj.end_y];
|
|
|
+ const color = ['#888888', '#15B337', '#15B337', '#15B337', '#FFAA00', '#FFAA00', '#EB260C', '#EB260C', '#EB260C'];
|
|
|
+ obj.polyline = new kakao.maps.Polyline({
|
|
|
+ path: [
|
|
|
+ getKakaoPosition(linePath1[1], linePath1[0]),
|
|
|
+ getKakaoPosition(linePath2[1], linePath2[0]),
|
|
|
+ ],
|
|
|
+ strokeWeight: 10,
|
|
|
+ strokeColor: color[obj.obj.acrd_los],
|
|
|
+ strokeOpacity: 1,
|
|
|
+ strokeStyle: 'solid',
|
|
|
+ endArrow: true,
|
|
|
+ name : obj.NAME,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (_Level <= 2 && _MapHandler['intersectionFlag']){
|
|
|
+ marker.setMap(_MapHandler.map);
|
|
|
+ obj.polyline.setMap(_MapHandler.map);
|
|
|
+ }
|
|
|
+
|
|
|
+ content.on('click', ()=> {
|
|
|
+ obj.click();
|
|
|
+ });
|
|
|
+
|
|
|
+ return marker;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 시설물 이미지 유형 변경 이벤트
|
|
|
+ * @param obj 시설물 객체
|
|
|
+ * @param type 시설물 이미지 유형
|
|
|
+ */
|
|
|
+function setMarkerImage(obj, type, isAtrd) {
|
|
|
+ const currentLevel = _Level;
|
|
|
+ let size = _size[currentLevel];
|
|
|
+ let point1 = size/2;
|
|
|
+ let point2 = size/2;
|
|
|
+ if (isAtrd) {
|
|
|
+ size = ( currentLevel >= 7 ) ? 24 : 48;
|
|
|
+ point1 = size/2;
|
|
|
+ point2 = size;
|
|
|
+ }
|
|
|
+
|
|
|
+ const imageSize = new kakao.maps.Size(size, size);
|
|
|
+ const imageSrc = obj.imgSrc + type +'.png';
|
|
|
+ const imageOption = {
|
|
|
+ offset: new kakao.maps.Point(point1, point2),
|
|
|
+ alt: obj.NAME
|
|
|
+ };
|
|
|
+ const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
|
|
|
+ obj.marker.setImage(markerImage);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 선택 리스트 스크롤 높이 반환 이벤트
|
|
|
+ * @param selectIndex 선택 인덱스
|
|
|
+ * @returns {number} 스크롤 높이
|
|
|
+ */
|
|
|
+function getScrollTop(selectIndex) {
|
|
|
+ let scrollTop = 0;
|
|
|
+ for (let ii=0; ii < selectIndex; ii++) {
|
|
|
+ let height = $('.left-list-area .list-content.list').children().eq(ii).css('height');
|
|
|
+ if (height) {
|
|
|
+ height = Number(height.replace('px', ''));
|
|
|
+ if (!isNaN(height)) {
|
|
|
+ scrollTop += height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return scrollTop;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 좌측 리스트 선택 시 스크롤 변경 이벤트
|
|
|
+ * @param flag
|
|
|
+ * @param array
|
|
|
+ * @param id
|
|
|
+ */
|
|
|
+function moveToScroll(flag, array, id) {
|
|
|
+ if (flag) {
|
|
|
+ let selectIndex = array.findIndex((obj)=> obj.ID == id);
|
|
|
+ let scrollTop = getScrollTop(selectIndex);
|
|
|
+ $('.left-list-area .list-content.list').animate({
|
|
|
+ scrollTop : scrollTop + 'px'
|
|
|
+ });
|
|
|
+ $('.mobile-select').val(id);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 시설물 데이터 처리 메서드
|
|
|
+ * @param jsonData 수신 데이터
|
|
|
+ * @param array 시설물 Object Array List
|
|
|
+ * @param facilityClass 시설물 Object Class
|
|
|
+ * @param listFlag 시설물 리스트 목록 표출 플래그
|
|
|
+ * @param type 시설물 유형
|
|
|
+ * @returns {*[]} 시설물 Object Array List
|
|
|
+ */
|
|
|
+function receiveFacilityData(jsonData, facilityClass, type) {
|
|
|
+ if (_MapHandler[type].length > 0) {
|
|
|
+ _MapHandler[type].forEach((obj)=>{
|
|
|
+ if (obj.marker) {
|
|
|
+ obj.marker.setMap(null);
|
|
|
+ }
|
|
|
+ if (obj.polyline) {
|
|
|
+ obj.polyline.setMap(null);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _MapHandler[type] = [];
|
|
|
+ }
|
|
|
+ let listStr = "";
|
|
|
+ let mobileStr = "";
|
|
|
+ if (jsonData && jsonData.length > 0) {
|
|
|
+ jsonData.forEach((obj)=>{
|
|
|
+ const marker = new facilityClass(obj);
|
|
|
+ marker.init();
|
|
|
+ if (type === 'intersection') {
|
|
|
+ if (obj.detail && obj.detail.length > 0) {
|
|
|
+ obj.detail.forEach((cameraObj)=>{
|
|
|
+ const camera = new IntersectionCameraObj(cameraObj);
|
|
|
+ camera.init();
|
|
|
+ _MapHandler[type + 'Camera'].push(camera);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ listStr += `<li id="${type}-${marker.ID}" onclick="infoWindowEvent('${type}', '${marker.ID}' , 'click')">${marker.NAME}</li>`
|
|
|
+ mobileStr += `<option value="${marker.ID}">${marker.NAME}</option>`;
|
|
|
+ _MapHandler[type].push(marker);
|
|
|
+ });
|
|
|
+
|
|
|
+ if (_MapHandler[type + 'Flag']) {
|
|
|
+ _MapHandler.show(type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_MapHandler[type + 'ListFlag'] === true) {
|
|
|
+ const listSection = $('.left-list-area .list-content.list');
|
|
|
+ listSection.empty();
|
|
|
+ listSection.html(listStr);
|
|
|
+ const $mobileSelect = $('.mobile-select');
|
|
|
+ $mobileSelect.append($(mobileStr));
|
|
|
+ $mobileSelect.on('change', function(){
|
|
|
+ const id = $(this).val();
|
|
|
+ if (id && id !== "-") {
|
|
|
+ infoWindowEvent(type, id , 'click');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 맵 중앙 아이콘 위 위치 좌표
|
|
|
+ * @param infoWindow
|
|
|
+ * @returns {number[]}
|
|
|
+ */
|
|
|
+function getInfoWidowPosition(infoWindow) {
|
|
|
+ const map = $('#map');
|
|
|
+
|
|
|
+ let mapHalfW = map.innerWidth() / 2;
|
|
|
+ let mapHalfH = map.innerHeight() / 2;
|
|
|
+ let mapTop = map.offset().top;
|
|
|
+ let halfW = infoWindow.innerWidth() / 2;
|
|
|
+ let height = infoWindow.innerHeight();
|
|
|
+ let left = mapHalfW - halfW;
|
|
|
+ let iconH = _size[_Level];
|
|
|
+ let top = mapTop + mapHalfH - height - iconH;
|
|
|
+ return [top, left];
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 맵 드래그 적용
|
|
|
+ */
|
|
|
+function setInfoWindowPositionWidthDraggable(markerObj, type) {
|
|
|
+ const {infoWindow, ID} = markerObj;
|
|
|
+ const position = getInfoWidowPosition(infoWindow);
|
|
|
+ let top = position[0];
|
|
|
+ let left = position[1];
|
|
|
+ infoWindow.css({
|
|
|
+ top : top + 'px',
|
|
|
+ left : left + 'px',
|
|
|
+ position : 'absolute',
|
|
|
+ zIndex : 999,
|
|
|
+ });
|
|
|
+ infoWindow.draggable({containment : 'body', handle: '.'+ type + '-name-' + ID});
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 카카오 포지션 지정
|
|
|
+ */
|
|
|
+function getKakaoPosition(yCoordinate, xCoordinate) {
|
|
|
+ return new kakao.maps.LatLng(Number(yCoordinate), Number(xCoordinate));
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * videoJs 객체 생성
|
|
|
+ */
|
|
|
+function createVideoJs(id, url) {
|
|
|
+ let video = videojs("video-" + id, {
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ src: url,
|
|
|
+ type: "application/x-mpegURL",
|
|
|
+ crossorigin: "anonymous",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ responsive: false,
|
|
|
+ autoplay: true,
|
|
|
+ muted: true,
|
|
|
+ preload: "metadata",
|
|
|
+ });
|
|
|
+
|
|
|
+ video.on('error', ()=>{
|
|
|
+ if (video.error().code === 4) {
|
|
|
+ video.pause();
|
|
|
+ video.dispose();
|
|
|
+ const $errorBox = $('.content > div:nth-child(1)');
|
|
|
+ $errorBox.append($('<img src="/images/icon/error.png" alt="스트리밍 오류 이미지">'));
|
|
|
+ $errorBox.css({
|
|
|
+ display : 'flex',
|
|
|
+ alignItems : 'center',
|
|
|
+ justifyContent : 'center',
|
|
|
+ });
|
|
|
+ video = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return video;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class MapHandler {
|
|
|
+ constructor(id) {
|
|
|
+ this.selectedObj = null;
|
|
|
+ this.map = null;
|
|
|
+ this.mapElement = id;
|
|
|
+ this.atrd = [];
|
|
|
+ }
|
|
|
+ init () {
|
|
|
+ //시설물별 배열, 토글 플래그, 리스트 플래그 생성
|
|
|
+ _FacilityArray.forEach((type)=>{
|
|
|
+ this[type] = [];
|
|
|
+ this[type + 'Flag'] = false;
|
|
|
+ this[type + 'ListFlag'] = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ const container = document.getElementById(this.mapElement); //지도를 담을 영역의 DOM 레퍼런스
|
|
|
+ const options = { //지도를 생성할 때 필요한 기본 옵션
|
|
|
+ center: getKakaoPosition(36.0191816, 129.3432983), //지도의 중심좌표.
|
|
|
+ level: _Level,
|
|
|
+ maxLevel: 9,
|
|
|
+ minLevel: 1,
|
|
|
+ disableDoubleClickZoom: true
|
|
|
+ };
|
|
|
+ this.map = new kakao.maps.Map(container, options);
|
|
|
+ const mapTypeControl = new kakao.maps.MapTypeControl();
|
|
|
+ this.map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
|
|
|
+ const zoomControl = new kakao.maps.ZoomControl();
|
|
|
+ this.map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
|
|
|
+
|
|
|
+ const handler = this;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Map Zoom Level Change 이벤트 (이미지 사이즈, 스마트 교차로 이미지 토글, 소통정보 정보 변경)
|
|
|
+ */
|
|
|
+ kakao.maps.event.addListener(this.map, 'zoom_changed', function () {
|
|
|
+ _Level = this.getLevel();
|
|
|
+ const zoomChangeArray = ['cctv', 'vms', 'parking', 'incident'];
|
|
|
+ zoomChangeArray.forEach((type)=>{
|
|
|
+ const markerArr = handler[type];
|
|
|
+ const markerFlag = handler[type + 'Flag'];
|
|
|
+ markerSizeChangeWithZoomLevel(markerArr, markerFlag);
|
|
|
+ });
|
|
|
+
|
|
|
+ intersectionMarkerChangeWithZoomLevel();
|
|
|
+ intersectionCameraChangeWidthZoomLevel();
|
|
|
+ if (handler['atrd'].length > 0) {
|
|
|
+ atrdMarkerResize();
|
|
|
+ }
|
|
|
+ getVertex();
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 좌표 데이터가의 양이 많으므로 이동 할때마다 영역별 소통정보를 새로 그려줌
|
|
|
+ */
|
|
|
+ kakao.maps.event.addListener(this.map, 'dragend', function() {
|
|
|
+ getVertex();
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //마커 클릭 이벤트
|
|
|
+ click(type, id) {
|
|
|
+ const markerArr = this[type]; // 시설물 배열
|
|
|
+ const markerFlag = this[ type + 'Flag']; // 시설물 토글 플래그
|
|
|
+ const markerListFlag = this[ type + 'ListFlag']; // 시설물 토글 플래그
|
|
|
+ const atrdArr = this['atrd'];
|
|
|
+ if (atrdArr && atrdArr.length > 0) {
|
|
|
+ atrdArr.forEach((atrd)=>{
|
|
|
+ atrd.close();
|
|
|
+ });
|
|
|
+ this['atrd'] = [];
|
|
|
+ _AtrdData = [];
|
|
|
+ const $selectedLi = $('.left-list-area .list-content.list > li.click');
|
|
|
+ if ($selectedLi) {
|
|
|
+ $selectedLi.removeClass('click');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let selectObj = this.selectedObj; // 이전 클릭 객체
|
|
|
+ let clickObj = this.getSelectObj(markerArr, id); // 현재 클릭 객체
|
|
|
+
|
|
|
+ if (selectObj) {
|
|
|
+ if (selectObj === clickObj && type !== 'intersection') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _MapHandler.close(selectObj.type, selectObj.ID);
|
|
|
+ }
|
|
|
+
|
|
|
+ const coordinates = getKakaoPosition(clickObj.Y_CRDN, clickObj.X_CRDN);
|
|
|
+
|
|
|
+ this.selectedObj = clickObj;
|
|
|
+
|
|
|
+ const selectedLi = $('#'+type+'-' + clickObj.ID);
|
|
|
+ selectedLi.addClass('click');
|
|
|
+ selectedLi.focus();
|
|
|
+
|
|
|
+ this.map.setCenter(coordinates);
|
|
|
+ if (this['trafficFlag']) {
|
|
|
+ getVertex();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (clickObj.iwContent) { // 인포 윈도우가 있을때만 실행
|
|
|
+ clickObj.infoWindow = $(clickObj.iwContent);
|
|
|
+ $('body').append(clickObj.infoWindow);
|
|
|
+ setInfoWindowPositionWidthDraggable(clickObj, type);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (clickObj.URL) { // Url 유무로 영상 이벤트 실행
|
|
|
+ this.videoEvent(clickObj);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'vms') { // vms 일 경우 이미지 표출실행
|
|
|
+ this.vmsEvent(clickObj);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'intersection') { // 스마트 교차로는 줌레벨 2로 변경
|
|
|
+ this.map.setLevel(2);
|
|
|
+ }
|
|
|
+ else if (clickObj.imgSrc) { // img src 값이 있는 객체만 클릭 이미지 변경
|
|
|
+ setMarkerImage(clickObj, 2, false);
|
|
|
+ }
|
|
|
+
|
|
|
+ clickObj.isClick = true;
|
|
|
+ if (markerListFlag) {
|
|
|
+ moveToScroll(markerFlag, markerArr, clickObj.ID); // 클릭 시 리스트 이동
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //마커 이벤트 종료
|
|
|
+ close(type, id) {
|
|
|
+ const markerArr = this[type];
|
|
|
+ const listFlag = this[type + 'ListFlag'];
|
|
|
+ const closeObj = this.getSelectObj(markerArr, id);
|
|
|
+ if (closeObj) {
|
|
|
+ closeObj.isClick = false;
|
|
|
+ this.selectedObj = null;
|
|
|
+
|
|
|
+ if (!type.includes('intersection')) { // 스마트교차로 아닌 화면은 이미지를 원래대로 돌린다.
|
|
|
+ setMarkerImage(closeObj, 1, false);
|
|
|
+ }
|
|
|
+
|
|
|
+ let oldPlayer = document.getElementById("video-" + closeObj.ID);
|
|
|
+ let selectedLi = $("#" + type + "-" + closeObj.ID);
|
|
|
+
|
|
|
+ if (selectedLi.hasClass('click')) { // 선택 리스트가 있는지 여부
|
|
|
+ selectedLi.removeClass('click');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (listFlag) { // 리스트 플래그 있는지 여부
|
|
|
+ $('.mobile-select').val("-");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (oldPlayer) { // 켜져있던 영상이 있는지 여부
|
|
|
+ videojs(oldPlayer).dispose();
|
|
|
+ }
|
|
|
+ if (closeObj.infoWindow) { // 인포 윈도우를 화면에 올려놨는지
|
|
|
+ closeObj.infoWindow.remove();
|
|
|
+ closeObj.infoWindow = null;
|
|
|
+ }
|
|
|
+ if (closeObj.timer) { // 인터벌 된 객체가 있는지
|
|
|
+ clearTimeout(closeObj.timer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //선택 객체 찾기
|
|
|
+ getSelectObj(array, id) {
|
|
|
+ let idx = array.findIndex(obj => obj.ID.toString() === id.toString());
|
|
|
+ return array[idx];
|
|
|
+ }
|
|
|
+
|
|
|
+ // 마커 보이기
|
|
|
+ show(type) {
|
|
|
+ this[type].forEach(obj => obj.setVisibleMarker(true));
|
|
|
+ this[type + 'Flag'] = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 마커 숨기기
|
|
|
+ hide(type) {
|
|
|
+ this[type].forEach(obj => {
|
|
|
+ obj.setVisibleMarker(false);
|
|
|
+ if (obj.isClick === true) {
|
|
|
+ _MapHandler.close(type, obj.ID);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this[type + 'Flag'] = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ //영상 이벤트
|
|
|
+ videoEvent(obj) {
|
|
|
+ let video = createVideoJs(obj.ID, obj.URL);
|
|
|
+
|
|
|
+ obj.timer = setTimeout(()=>{
|
|
|
+ if (video) {
|
|
|
+ video.pause();
|
|
|
+ }
|
|
|
+ }, CCTV_DISPLAY_TIME);
|
|
|
+
|
|
|
+ $('.continue-play').on('click', ()=>{
|
|
|
+ if (obj.timer) {
|
|
|
+ setTimeout(obj.timer);
|
|
|
+ }
|
|
|
+ if (video) {
|
|
|
+ video.play();
|
|
|
+ obj.timer = setTimeout(()=>{
|
|
|
+ video.pause();
|
|
|
+ }, CCTV_DISPLAY_TIME);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //vms 이미지 표출 이벤트
|
|
|
+ vmsEvent(obj) {
|
|
|
+ let cnt = 1;
|
|
|
+ if (obj.phaseArray.length > 0) {
|
|
|
+ obj.timer = setInterval(()=>{
|
|
|
+ if (cnt === obj.phaseArray.length) {
|
|
|
+ cnt = 0;
|
|
|
+ }
|
|
|
+ const activeImage = $('.vms-info-window .content img.active');
|
|
|
+ if (activeImage[0]) {
|
|
|
+ activeImage.removeClass('active');
|
|
|
+ }
|
|
|
+ $("#phase-" + obj.phaseArray[cnt]).addClass('active');
|
|
|
+ cnt++;
|
|
|
+ }, VMS_DISPLAY_TIME);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
