浏览代码

update phohang requirements makrer image and infowindow position

junggilpark 11 月之前
父节点
当前提交
5b9ec14fc6

+ 0 - 1
src/main/java/com/its/web/service/traffic/TrafficService.java

@@ -264,7 +264,6 @@ public class TrafficService {
     }
 
     public TbPrkPlceRtDto findPrkPlceRtInfo(Long nmbr) {
-        log.info("findPrkPlceRtInfo nmbr : {}",nmbr);
         return this.mapper.findPrkPlceRtInfo(nmbr);
     }
 }

+ 3 - 3
src/main/resources/static/css/traffic.css

@@ -548,8 +548,8 @@ ul, li {
 }
 
 .cctv-info-window{
-    width: 370px;
-    height: 300px;
+    width: 400px;
+    height: 330px;
     background-color: white;
     box-shadow: 2px 2px 2px 2px #2b333f;
     padding: 5px;
@@ -723,7 +723,7 @@ ul, li {
  }
 .cctv-info-window .content > div:nth-child(1){
     width: 100%;
-    height: 236.25px;
+    height: calc(100% - 35px);
     background-color: black;
 }
 .cctv-info-window .content video {

二进制
src/main/resources/static/images/icon/cctv2.png


二进制
src/main/resources/static/images/icon/cctv3.png


二进制
src/main/resources/static/images/icon/parking1-1.png


二进制
src/main/resources/static/images/icon/parking1-2.png


二进制
src/main/resources/static/images/icon/parking2-1.png


二进制
src/main/resources/static/images/icon/parking2-2.png


二进制
src/main/resources/static/images/icon/vms2.png


二进制
src/main/resources/static/images/icon/vms3.png


+ 24 - 7
src/main/resources/static/js/traffic/traffic.js

@@ -230,6 +230,9 @@ function searchLocation(event) {
     if (event && event.key !== 'Enter') {
         return;
     }
+    if (_MarkerHandle.selectedMarker) {
+        _MarkerHandle.selectedMarker.close();
+    }
     $('.list-content.spot').empty();
     const $search = $('.location-box input');
     if (_MarkerArr.length > 0) {
@@ -313,8 +316,10 @@ function searchLocation(event) {
  * @param listIndex 지점 선택 인덱스
  */
 function moveLocation(xCoordinate, yCoordinate, listIndex) {
+    if (_MarkerHandle.selectedMarker) {
+        _MarkerHandle.selectedMarker.close();
+    }
     const position = getKakaoPosition(yCoordinate, xCoordinate);
-
     _MapHandler.setCenter(position);
     _MapHandler.setLevel(3);
     $('.list-content.spot > li.click').removeClass('click');
@@ -752,7 +757,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'];
+        this.imageOnOff = ['cctv', 'incident', 'vms', 'parking'];
     }
 
     //스마트교차로 카메라는 카메라 방향별로 이미지를 돌려야하므로 두개 만드는 방식이 다름
@@ -835,8 +840,12 @@ class MarkerObj {
     //현재 레벨별 이미지 Option 값
     getImageOptions() {
         let size = this.size[_Level];
+        if (this.isClick) {
+            size = size * 1.5;
+        }
         let offsetX = size/2;
         let offsetY = size/2;
+
         if (this.type === 'atrd') {
             size = this.atrdSize[_Level];
             offsetX = size/2;
@@ -917,11 +926,13 @@ class MarkerObj {
             getVertex();
         }
 
+        this.isClick = true;
+
         if (this.imageOnOff.includes(this.type)) {
             this.setImage('2');
         }
 
-        this.isClick = true;
+
 
         if (_MarkerHandle.isDrawList(this.type)) {
             const markerArr = _MarkerHandle.findMarkerArr(this.type);
@@ -943,6 +954,7 @@ class MarkerObj {
             this.limitTimer = null;
         }
 
+        this.isClick = false;
         if (this.imageOnOff.includes(this.type)) {// 클릭 이미지가 있는 경우
             this.setImage('1');
         }
@@ -980,7 +992,6 @@ class MarkerObj {
 
 
         //선택 해제
-        this.isClick = false;
         _MarkerHandle.selectedMarker = null;
     }
 
@@ -1244,8 +1255,8 @@ class TbParkingObj extends MarkerObj{
             URL         : null,
             TYPE        : 'parking',
             DATA        : obj,
-            IMAGE_TYPE  : '',
-            IMAGE       : '/images/icon/parking' + (obj.prk_plce_nmbr ? '1-2' : '2-2'),
+            IMAGE_TYPE  : '1',
+            IMAGE       : '/images/icon/parking' + (obj.prk_plce_nmbr ? '1-' : '2-'),
             ADDR        : obj.parking_addr,
         })
         this.iwContent = this.getIwContent();
@@ -1722,8 +1733,14 @@ function getInfoWidowPosition(infoWindow) {
 function setInfoWindowPositionWidthDraggable(markerObj, type) {
     const { infoWindow, ID } = markerObj;
     const position = getInfoWidowPosition(infoWindow); //Current Marker Position
+    // console.log(infoWindow.width());
     let top = position[0];
-    let left = position[1];
+    let left = position[1] + (infoWindow.width() / 2) + (markerObj.atrdSize[_Level] / 2);
+
+    if (markerObj.type === 'parking') {
+        top = $('header').outerHeight() + $('.toggle-button').outerHeight() + 2;
+        left = $('.left-list-area').outerWidth();
+    }
     infoWindow.css({
         top : top + 'px',
         left : left + 'px',

+ 5 - 5
src/main/resources/templates/include/traffic.html

@@ -47,11 +47,11 @@
     </div>
     <ul class="list-content spot"></ul>
 </div>
-<div class="traffic-color-legend">
-    <span>원할</span>
-    <span class="gradation"></span>
-    <span>정체</span>
-</div>
+<!--<div class="traffic-color-legend">-->
+<!--    <span>원할</span>-->
+<!--    <span class="gradation"></span>-->
+<!--    <span>정체</span>-->
+<!--</div>-->
 <div class="legend-bottom">
     <h5>범례</h5>
     <ul>