|
|
@@ -39,12 +39,30 @@ $(document).ready(function () {
|
|
|
init();
|
|
|
});
|
|
|
|
|
|
+let sigData =
|
|
|
+ {
|
|
|
+ service_id : 1,
|
|
|
+ seq_no : 1,
|
|
|
+ node_id : 1,
|
|
|
+ ring : 1,
|
|
|
+ head_lat : 126.5169020,
|
|
|
+ head_lng : 33.2475970,
|
|
|
+ mid_lat : 126.5170416,
|
|
|
+ mid_lng : 33.2475840,
|
|
|
+ end_lat : 126.5170395,
|
|
|
+ end_lng : 33.2474713
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
function init() {
|
|
|
//정보관리창 닫을때 regionCd intNo 가저와서 해당 위치로 이동..
|
|
|
var masterLng = sessionStorage.getItem('masterLng');
|
|
|
var masterLat = sessionStorage.getItem('masterLat');
|
|
|
- var lat = 35.871595504565676;
|
|
|
- var lng = 128.601612749012;
|
|
|
+ //var lat = 35.871595504565676;
|
|
|
+ //var lng = 128.601612749012;
|
|
|
+ var lat = '37.5630934';
|
|
|
+ var lng = '126.9752351';
|
|
|
|
|
|
if (masterLng != null && masterLat != null) {
|
|
|
lat = masterLat;
|
|
|
@@ -54,11 +72,12 @@ function init() {
|
|
|
mapContainer = document.getElementById('map') // 지도를 표시할 div
|
|
|
var mapOption = {
|
|
|
center: new kakao.maps.LatLng(lat, lng),
|
|
|
- level: _Level
|
|
|
+ level: _Level,
|
|
|
+ maxLevel : 11,
|
|
|
};
|
|
|
|
|
|
map = new kakao.maps.Map(mapContainer, mapOption); // 지도생성
|
|
|
- map.setMaxLevel(11);
|
|
|
+ // map.setMaxLevel(11);
|
|
|
// 지도와 스카이뷰 지도타입 컨트롤을 생성
|
|
|
var mapTypeControl = new kakao.maps.MapTypeControl();
|
|
|
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
|
|
|
@@ -71,6 +90,8 @@ function init() {
|
|
|
// 신호현시 줌,이동 이벤트 분리
|
|
|
kakao.maps.event.addListener(map, 'zoom_changed', mapZoomBound);
|
|
|
kakao.maps.event.addListener(map, 'dragend', mapMoveBound);//드래그 종료시 이벤트발생
|
|
|
+ kakao.maps.event.addListener(map, 'rightclick', mapRightClick);//드래그 종료시 이벤트발생
|
|
|
+ kakao.maps.event.addListener(map, 'click', mapClick);//드래그 종료시 이벤트발생
|
|
|
//kakao.maps.event.addListener(map, 'idle', mapIdle);
|
|
|
|
|
|
/* // 맵클릭했을때 위도경도 찾기
|
|
|
@@ -79,7 +100,313 @@ function init() {
|
|
|
console.log(nowlatLng);
|
|
|
});*/
|
|
|
|
|
|
- getSignalInfo();
|
|
|
+ //getSignalInfo();
|
|
|
+ // const worker = new Worker('/js/worker.js');
|
|
|
+ // worker.postMessage({message:"worker START"});
|
|
|
+ // worker.onmessage = (ev)=>{
|
|
|
+ // const data = JSON.parse(ev.data);
|
|
|
+ // console.log(data);
|
|
|
+ // }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+let coordMarker;
|
|
|
+function mapRightClick(e) {
|
|
|
+ if (!$('.road_on')[0]) {
|
|
|
+ if (coordMarker) {
|
|
|
+ coordMarker.close();
|
|
|
+ }
|
|
|
+ const textArea = $('<textarea>');
|
|
|
+ let xCoordinate = e.latLng.getLng().toString();
|
|
|
+ let yCoordinate = e.latLng.getLat().toString();
|
|
|
+
|
|
|
+ if (xCoordinate.length > 11) {
|
|
|
+ xCoordinate = xCoordinate.substring(0, 11);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (yCoordinate.length > 10) {
|
|
|
+ yCoordinate = yCoordinate.substring(0, 10);
|
|
|
+ }
|
|
|
+ const text = xCoordinate + "," + yCoordinate;
|
|
|
+ textArea.val(text);
|
|
|
+ $('body').append(textArea);
|
|
|
+ textArea[0].select();
|
|
|
+ document.execCommand("copy");
|
|
|
+ textArea.remove();
|
|
|
+ coordMarker = new kakao.maps.InfoWindow({
|
|
|
+ map: map,
|
|
|
+ position: e.latLng,
|
|
|
+ content: '<div style="width:150px; text-align: center;">' + text + '</div>',
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function mapClick(){
|
|
|
+ if (coordMarker) {
|
|
|
+ coordMarker.close();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function getKakaoPosition(y, x) {
|
|
|
+ return new kakao.maps.LatLng(y, x);
|
|
|
+}
|
|
|
+
|
|
|
+let testData = [
|
|
|
+ {
|
|
|
+ service_id : 1,
|
|
|
+ lat : 126.5240617,
|
|
|
+ lng : 33.2471400,
|
|
|
+ seq_no : 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 1,
|
|
|
+ lat : 126.5229991,
|
|
|
+ lng : 33.2471900,
|
|
|
+ seq_no : 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 1,
|
|
|
+ lat : 126.5210876,
|
|
|
+ lng : 33.2474622,
|
|
|
+ seq_no : 3,
|
|
|
+ },{
|
|
|
+ service_id : 1,
|
|
|
+ lat : 126.5191443,
|
|
|
+ lng : 33.2476711,
|
|
|
+ seq_no : 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 1,
|
|
|
+ lat : 126.5167390,
|
|
|
+ lng : 33.2479593,
|
|
|
+ seq_no : 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 1,
|
|
|
+ lat : 126.5141087,
|
|
|
+ lng : 33.2482105,
|
|
|
+ seq_no : 7,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5141180,
|
|
|
+ lng : 33.2479716,
|
|
|
+ seq_no : 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5141180,
|
|
|
+ lng : 33.2479716,
|
|
|
+ seq_no : 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5154815,
|
|
|
+ lng : 33.2478417,
|
|
|
+ seq_no : 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5169955,
|
|
|
+ lng : 33.2476673,
|
|
|
+ seq_no : 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5187242,
|
|
|
+ lng : 33.2474756,
|
|
|
+ seq_no : 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5204636,
|
|
|
+ lng : 33.2472750,
|
|
|
+ seq_no : 6,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5223642,
|
|
|
+ lng : 33.2470298,
|
|
|
+ seq_no : 7,
|
|
|
+ },{
|
|
|
+ service_id : 2,
|
|
|
+ lat : 126.5240712,
|
|
|
+ lng : 33.2468741,
|
|
|
+ seq_no : 8,
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+function emergencyEvent() {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function test() {
|
|
|
+ if (testData && testData.length) {
|
|
|
+ testData.sort((a,b)=>{
|
|
|
+ return a.service_id > b.service_id ? 1 : a.service_id < b.service_id ? -1 : a.seq_no > b.seq_no ? 1 : a.seq_no === b.seq_no ? 0 : -1
|
|
|
+ });
|
|
|
+ const objMap = new Map();
|
|
|
+ for (let data of testData) {
|
|
|
+ if (!objMap.get(data.service_id)) {
|
|
|
+ objMap.set(data.service_id, {service_id : data.service_id, coordinateArr : []});
|
|
|
+ }
|
|
|
+ objMap.get(data.service_id).coordinateArr.push({
|
|
|
+ lng : data.lng,
|
|
|
+ lat : data.lat,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ objMap.forEach((obj)=>{
|
|
|
+ const road = new emergencyRoad(obj);
|
|
|
+ road.init();
|
|
|
+ road.drawPolyLine();
|
|
|
+ road.setBound();
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function emergencySignal(data){
|
|
|
+ if ( data && data.length > 0 ) {
|
|
|
+ data.sort((a,b)=>{
|
|
|
+ return a.service_id > b.service_id ? 1 : a.service_id < b.service_id ? -1 : a.seq_no > b.seq_no ? 1 : a.seq_no === b.seq_no ? 0 : -1
|
|
|
+ });
|
|
|
+ let lineMap = new Map();
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ bounds.extend(getKakaoPosition(33.2471400, 126.5240617));
|
|
|
+ bounds.extend(getKakaoPosition(33.2482105,126.5141087));
|
|
|
+ map.setBounds(bounds);
|
|
|
+ const markerMap = new Map();
|
|
|
+ for (let obj of data) {
|
|
|
+ const position = getKakaoPosition(obj.lng, obj.lat);
|
|
|
+ if (!lineMap.get(obj.service_id)) {
|
|
|
+ lineMap.set(obj.service_id, []);
|
|
|
+ let markImage = new kakao.maps.MarkerImage(
|
|
|
+ '/images/car.svg',
|
|
|
+ new kakao.maps.Size(32, 39), {
|
|
|
+ offset: new kakao.maps.Point(16, 39)
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ const marker = new kakao.maps.Marker({
|
|
|
+ image: markImage,
|
|
|
+ position: position,
|
|
|
+ });
|
|
|
+ markerMap.set(obj.service_id, marker);
|
|
|
+ }
|
|
|
+
|
|
|
+ lineMap.get(obj.service_id).push(position);
|
|
|
+ }
|
|
|
+ let polyMap = new Map();
|
|
|
+ lineMap.forEach((position, key)=>{
|
|
|
+ let backLine = new kakao.maps.Polyline({
|
|
|
+ path: position, // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
|
|
|
+ strokeWeight: 10, // 선의 두께입니다
|
|
|
+ strokeColor: '#ffffff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 1,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
|
|
|
+ let polyline = new kakao.maps.Polyline({
|
|
|
+ strokeWeight: 8, // 선의 두께입니다
|
|
|
+ path: position,
|
|
|
+ strokeColor: '#3386ff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 2,
|
|
|
+ });
|
|
|
+ backLine.setMap(map);
|
|
|
+ polyline.setMap(map);
|
|
|
+ polyMap.set(key, [backLine, polyline]);
|
|
|
+ });
|
|
|
+
|
|
|
+ markerMap.forEach((marker, key)=>{
|
|
|
+ marker.setMap(map);
|
|
|
+ if (lineMap.get(key)) {
|
|
|
+ const arr = lineMap.get(key);
|
|
|
+ let cnt = 0;
|
|
|
+ const timer = setInterval(()=>{
|
|
|
+ if (arr[cnt]) {
|
|
|
+ marker.setPosition(arr[cnt++])
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ marker.setMap(null);
|
|
|
+ const polyArr = polyMap.get(key);
|
|
|
+ if (polyArr && polyArr.length === 2) {
|
|
|
+ polyArr[0].setMap(null);
|
|
|
+ polyArr[1].setMap(null);
|
|
|
+ }
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function drawEmergencyRoad(serviceId) {
|
|
|
+ requestService('/getEvpList.do', {serviceId : serviceId}, (data)=>{
|
|
|
+ data.sort((a,b)=>{
|
|
|
+ return a.service_id > b.service_id ? 1 : a.service_id < b.service_id ? -1 : a.seq_no > b.seq_no ? 1 : a.seq_no === b.seq_no ? 0 : -1
|
|
|
+ });
|
|
|
+ let lineMap = new Map();
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ bounds.extend(getKakaoPosition(33.2471400, 126.5240617));
|
|
|
+ bounds.extend(getKakaoPosition(33.2482105,126.5141087));
|
|
|
+ map.setBounds(bounds);
|
|
|
+ const markerMap = new Map();
|
|
|
+ for (let obj of data) {
|
|
|
+ const position = getKakaoPosition(obj.lng, obj.lat);
|
|
|
+ if (!lineMap.get(obj.service_id)) {
|
|
|
+ lineMap.set(obj.service_id, []);
|
|
|
+ let markImage = new kakao.maps.MarkerImage(
|
|
|
+ '/images/car.svg',
|
|
|
+ new kakao.maps.Size(32, 39), {
|
|
|
+ //마커의 좌표에 해당하는 이미지의 위치를 설정합니다.
|
|
|
+ //이미지의 모양에 따라 값은 다를 수 있으나, 보통 width/2, height를 주면 좌표에 이미지의 하단 중앙이 올라가게 됩니다.
|
|
|
+ offset: new kakao.maps.Point(16, 39)
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ const marker = new kakao.maps.Marker({
|
|
|
+ image: markImage,
|
|
|
+ position: position,
|
|
|
+ });
|
|
|
+ markerMap.set(obj.service_id, marker);
|
|
|
+ }
|
|
|
+
|
|
|
+ lineMap.get(obj.service_id).push(position);
|
|
|
+ }
|
|
|
+ let polyMap = new Map();
|
|
|
+ lineMap.forEach((position, key)=>{
|
|
|
+ let backLine = new kakao.maps.Polyline({
|
|
|
+ path: position, // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
|
|
|
+ strokeWeight: 10, // 선의 두께입니다
|
|
|
+ strokeColor: '#ffffff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 1,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
|
|
|
+ let polyline = new kakao.maps.Polyline({
|
|
|
+ strokeWeight: 8, // 선의 두께입니다
|
|
|
+ path: position,
|
|
|
+ strokeColor: '#3386ff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 2,
|
|
|
+ });
|
|
|
+ backLine.setMap(map);
|
|
|
+ polyline.setMap(map);
|
|
|
+ polyMap.set(key, [backLine, polyline]);
|
|
|
+ });
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function moveMarker(position, marker) {
|
|
|
+ marker.setCenter(position);
|
|
|
}
|
|
|
|
|
|
function customOverlayFnc(intNm, xCoord, yCoord) {
|
|
|
@@ -303,13 +630,13 @@ function getRoadView() {
|
|
|
|
|
|
//로드뷰에서 X버튼을 눌렀을 때 로드뷰를 지도 뒤로 숨기는 함수입니다
|
|
|
function closeRoadview() {
|
|
|
- //$('#mapWrapper').css('width','100%');
|
|
|
- var width = wideFlag ? 'calc(100% - 10px)':'calc(100% - 338px)';
|
|
|
+ const width = wideFlag ? 'calc(100% - 10px)':'calc(100% - 338px)';
|
|
|
$('#mapWrapper').css('width', width);
|
|
|
- //$('#rvWrapper').css('width','0px');
|
|
|
$('#rvWrapper').css('display','none');
|
|
|
+
|
|
|
// 지도의 크기가 변경되었기 때문에 relayout 함수를 호출합니다
|
|
|
map.relayout();
|
|
|
+
|
|
|
// 현재 마커가 놓인 자리의 좌표입니다
|
|
|
if(roadviewMarker != null)
|
|
|
{
|
|
|
@@ -1200,4 +1527,242 @@ function toggleSiginfo() {
|
|
|
if (customOverlay != null) customOverlay.setMap(null);
|
|
|
} else _ToggleSiginfo = false;
|
|
|
getSignalInfo();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/****************************************************************************
|
|
|
+ * 좌표검색
|
|
|
+ ****************************************************************************/
|
|
|
+function moveToPosition() {
|
|
|
+ const $lctnX = $('#lctn_x_coord');
|
|
|
+ const $lctnY = $('#lctn_y_coord');
|
|
|
+ var xCrdn = $lctnX.val();
|
|
|
+ var yCrdn = $lctnY.val();
|
|
|
+ if (!xCrdn) {
|
|
|
+ alert("X 좌표 값을 입력해주세요.");
|
|
|
+ return $lctnX.focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!yCrdn) {
|
|
|
+ alert("Y 좌표 값을 입력해주세요.");
|
|
|
+ return $lctnY.focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isNaN(Number(xCrdn)) || xCrdn.length < 3) {
|
|
|
+ alert("X 좌표 : "+xCrdn+"\n부적절한 좌표값입니다. 다시 입력해주세요.");
|
|
|
+ return $lctnX.focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isNaN(Number(yCrdn)) || yCrdn.lenth < 2) {
|
|
|
+ alert("Y 좌표 : "+yCrdn+"\n부적절한 좌표값입니다. 다시 입력해주세요.");
|
|
|
+ return $lctnY.focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!xCrdn.includes('.')) {
|
|
|
+ xCrdn = xCrdn.substring(0, 3) + '.' + xCrdn.substring(3, xCrdn.length);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!yCrdn.includes('.')) {
|
|
|
+ yCrdn = yCrdn.substring(0, 2) + '.' + yCrdn.substring(2, yCrdn.length);
|
|
|
+ }
|
|
|
+ const position = new kakao.maps.LatLng(yCrdn, xCrdn);
|
|
|
+ map.setCenter(position);
|
|
|
+ map.setLevel(3);
|
|
|
+ mapZoomBound();
|
|
|
+}
|
|
|
+
|
|
|
+class emergencyRoad{
|
|
|
+ constructor({service_id, coordinateArr}) {
|
|
|
+ this.service_id = service_id;
|
|
|
+ this.coordinateArr = coordinateArr;
|
|
|
+ this.backPoly = null;
|
|
|
+ this.polyLine = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ if (this.coordinateArr && this.coordinateArr.length > 0) {
|
|
|
+ let lineArr = [];
|
|
|
+ for (let coordinate of this.coordinateArr) {
|
|
|
+ lineArr.push(getKakaoPosition(coordinate.lng, coordinate.lat));
|
|
|
+ }
|
|
|
+ this.backPoly = new kakao.maps.Polyline({
|
|
|
+ path: lineArr, // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
|
|
|
+ strokeWeight: 10, // 선의 두께입니다
|
|
|
+ strokeColor: '#ffffff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 1,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
|
|
|
+ this.polyLine = new kakao.maps.Polyline({
|
|
|
+ strokeWeight: 8, // 선의 두께입니다
|
|
|
+ path: lineArr,
|
|
|
+ strokeColor: '#3386ff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 2,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ drawPolyLine() {
|
|
|
+ if (this.polyLine && this.backPoly) {
|
|
|
+ this.polyLine.setMap(map);
|
|
|
+ this.backPoly.setMap(map);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ hidePolyLine() {
|
|
|
+ if (this.polyLine && this.backPoly) {
|
|
|
+ this.polyLine.setMap(null);
|
|
|
+ this.backPoly.setMap(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setBound() {
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ const lastIdx = this.coordinateArr.length - 1;
|
|
|
+ bounds.extend(getKakaoPosition( this.coordinateArr[0].lng, this.coordinateArr[0].lat));
|
|
|
+ bounds.extend(getKakaoPosition(this.coordinateArr[lastIdx].lng, this.coordinateArr[lastIdx].lat));
|
|
|
+ map.setBounds(bounds);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const stateMap = new Map();
|
|
|
+stateMap.set(0, '#FF0000');
|
|
|
+stateMap.set(1, '#00FF00');
|
|
|
+stateMap.set(2, '#FFFF00');
|
|
|
+stateMap.set(3, '#808080');
|
|
|
+stateMap.set(4, '#CC6600');
|
|
|
+stateMap.set(5, '#9933FF');
|
|
|
+
|
|
|
+// 1~5 레발 까지만 보임
|
|
|
+// 통신 이상 : 0 (#FF0000, 빨강), 정상 : 1 (#00FF00, 초록), 점멸 : 2 (#FFFF00, 노랑), 소등 : 3 (#808080, 회색), 수동진행 : 4 (#CC6600, 갈색), 현시 유지 : 5 (#9933FF, 보라)
|
|
|
+class Ring{
|
|
|
+ constructor({service_id, seq_no, node_id, ring, phase_no, plan_class, flow_no, head_lat, head_lng, mid_lat, mid_lng, end_lat, end_lng, head_angle, end_angle, state}) {
|
|
|
+ this.service_id = service_id;
|
|
|
+ this.seq_no = seq_no;
|
|
|
+ this.node_id = node_id;
|
|
|
+ this.ring = ring;
|
|
|
+ this.phase_no = phase_no;
|
|
|
+ this.plan_class = plan_class;
|
|
|
+ this.flow_no = flow_no;
|
|
|
+ this.head_lat = head_lat;
|
|
|
+ this.head_lng = head_lng;
|
|
|
+ this.mid_lat = mid_lat;
|
|
|
+ this.mid_lng = mid_lng;
|
|
|
+ this.end_lat = end_lat;
|
|
|
+ this.end_lng = end_lng;
|
|
|
+ this.head_angle = head_angle;
|
|
|
+ this.end_angle = end_angle;
|
|
|
+ this.state = state;
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ const headPosition = getKakaoPosition(this.head_lng, this.head_lat);
|
|
|
+ const midPosition = getKakaoPosition(this.mid_lng, this.mid_lat);
|
|
|
+ const endPosition = getKakaoPosition(this.end_lng, this.end_lat);
|
|
|
+ let stateColor = '#FF0000';
|
|
|
+ if (!isNaN(Number(this.state))) {
|
|
|
+ stateColor = stateMap.get(Number(this.state));
|
|
|
+ }
|
|
|
+ // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
|
|
|
+ this.polyLine = new kakao.maps.Polyline({
|
|
|
+ strokeWeight: 5, // 선의 두께입니다
|
|
|
+ path: [headPosition, midPosition, endPosition],
|
|
|
+ strokeColor: stateColor, // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ endArrow : true,
|
|
|
+ zIndex: 2,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ drawLine() {
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setMap(map);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ hideLine() {
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setMap(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setPath(pathArr) {
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setPath(pathArr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setOptions(option) {
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setOptions(option);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class Sig{
|
|
|
+ constructor({clct_dt, service_id, node_id, node_nm, lat, lng, seq_no, rem_dist, state, plan_class, a_ring_phase, b_ring_phase, hold_phase}) {
|
|
|
+ this.clct_dt = clct_dt;
|
|
|
+ this.service_id = service_id;
|
|
|
+ this.node_id = node_id;
|
|
|
+ this.node_nm = node_nm;
|
|
|
+ this.lat = lat;
|
|
|
+ this.lng = lng;
|
|
|
+ this.seq_no = seq_no;
|
|
|
+ this.rem_dist = rem_dist;
|
|
|
+ this.state = state;
|
|
|
+ this.plan_class = plan_class;
|
|
|
+ this.a_ring_phase = a_ring_phase;
|
|
|
+ this.b_ring_phase = b_ring_phase;
|
|
|
+ this.hold_phase = hold_phase;
|
|
|
+ this.a_ring = null;
|
|
|
+ this.b_ring = null;
|
|
|
+ this.marker = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ let stateColor = '#FF0000';
|
|
|
+ if (!isNaN(Number(this.state))) {
|
|
|
+ stateColor = stateMap.get(Number(this.state));
|
|
|
+ }
|
|
|
+ this.marker = new kakao.maps.Circle({
|
|
|
+ center : getKakaoPosition(this.lng, this.lat), // 원의 중심좌표 입니다
|
|
|
+ radius: 50, // 미터 단위의 원의 반지름입니다
|
|
|
+ strokeWeight: 5, // 선의 두께입니다
|
|
|
+ strokeColor: stateColor, // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일 입니다
|
|
|
+ fillColor: stateColor, // 채우기 색깔입니다
|
|
|
+ fillOpacity: 0.7, // 채우기 불투명도 입니다
|
|
|
+ zIndex: 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ drawMarker() {
|
|
|
+ this.marker.setMap(map);
|
|
|
+ if (this.a_ring) {
|
|
|
+ this.a_ring.setMap(map);
|
|
|
+ }
|
|
|
+ if (this.b_ring) {
|
|
|
+ this.b_ring.setMap(map);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ hideMarker() {
|
|
|
+ this.marker.setMap(null);
|
|
|
+ if (this.a_ring) {
|
|
|
+ this.a_ring.setMap(null);
|
|
|
+ }
|
|
|
+ if (this.b_ring) {
|
|
|
+ this.b_ring.setMap(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setCenter() {
|
|
|
+ map.setCenter(getKakaoPosition(this.lng, this.lat));
|
|
|
+ }
|
|
|
}
|
