|
|
@@ -25,6 +25,7 @@ var searchInfoWindow = [] //장소 이름 인포윈도우
|
|
|
var imsMarker = [];
|
|
|
var troubleMarker = [];
|
|
|
var linkLineArr = [];
|
|
|
+var _EmergencyMap = new Map();
|
|
|
|
|
|
var IMS_VIEW_LEVEL = 8; //돌발 7
|
|
|
|
|
|
@@ -34,25 +35,19 @@ var roadviewMarker = null;
|
|
|
|
|
|
var _ToggleSiginfo = false;
|
|
|
|
|
|
+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');
|
|
|
+
|
|
|
|
|
|
$(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() {
|
|
|
@@ -77,12 +72,13 @@ function init() {
|
|
|
};
|
|
|
|
|
|
map = new kakao.maps.Map(mapContainer, mapOption); // 지도생성
|
|
|
- // map.setMaxLevel(11);
|
|
|
+
|
|
|
+ // map.setMaxLevel(11);
|
|
|
// 지도와 스카이뷰 지도타입 컨트롤을 생성
|
|
|
- var mapTypeControl = new kakao.maps.MapTypeControl();
|
|
|
+ //var mapTypeControl = new kakao.maps.MapTypeControl();
|
|
|
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
|
|
|
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
|
|
|
- map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
|
|
|
+ //map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
|
|
|
// 지도 확대 축소 줌 컨트롤을 생성
|
|
|
var zoomControl = new kakao.maps.ZoomControl();
|
|
|
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
|
|
|
@@ -101,12 +97,12 @@ function init() {
|
|
|
});*/
|
|
|
|
|
|
//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);
|
|
|
- // }
|
|
|
+ const worker = new Worker('/js/worker.js');
|
|
|
+ worker.postMessage({message:"worker START"});
|
|
|
+ worker.onmessage = (ev)=>{
|
|
|
+ const data = JSON.parse(ev.data);
|
|
|
+ drawEmergencyRoad(data);
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -151,258 +147,247 @@ 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 emergencyHistory() {
|
|
|
+ const param = {serviceId : '1832024101614555100'};
|
|
|
+ requestService('getEvpHistory.do', param, emergencyHistoryCallBack, true);
|
|
|
}
|
|
|
|
|
|
-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();
|
|
|
+const historyMap = new Map();
|
|
|
+function emergencyHistoryCallBack(data) {
|
|
|
+ if (data && data.length) {
|
|
|
+
|
|
|
+ data.forEach((obj)=>{
|
|
|
+ historyMap.set(obj.service_id, obj);
|
|
|
})
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-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
|
|
|
+ const selected = historyMap.get('1832024101614555100');
|
|
|
+ const {route_list, phase_list, event_list} = selected;
|
|
|
+ const phaseMap = new Map();
|
|
|
+
|
|
|
+ const dateMap = new Map();
|
|
|
+
|
|
|
+ event_list.forEach((eventObj)=>{
|
|
|
+ dateMap.set(eventObj.clct_dt, new Map());
|
|
|
+ dateMap.get(eventObj.clct_dt).set('event', eventObj);
|
|
|
+ dateMap.get(eventObj.clct_dt).set('sig', []);
|
|
|
});
|
|
|
- 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)
|
|
|
- });
|
|
|
|
|
|
+ phase_list.forEach((obj)=>{
|
|
|
+ if (!dateMap.get(obj.clct_dt)) {
|
|
|
+ dateMap.set(obj.clct_dt, new Map());
|
|
|
+ dateMap.get(obj.clct_dt).set('event', null);
|
|
|
+ dateMap.get(obj.clct_dt).set('sig', []);
|
|
|
+ }
|
|
|
+ dateMap.get(obj.clct_dt).get('sig').push(obj);
|
|
|
+ });
|
|
|
|
|
|
- const marker = new kakao.maps.Marker({
|
|
|
- image: markImage,
|
|
|
- position: position,
|
|
|
- });
|
|
|
- markerMap.set(obj.service_id, marker);
|
|
|
+ let beforeSig;
|
|
|
+ let beforeEvent;
|
|
|
+ const dateArr = Array.from(dateMap.keys()).sort();
|
|
|
+
|
|
|
+
|
|
|
+ let road = null;
|
|
|
+ let car = null;
|
|
|
+ let sig = new Map();
|
|
|
+ let arrive = null;
|
|
|
+
|
|
|
+ for (let date of dateArr) {
|
|
|
+ const objMap = dateMap.get(date);
|
|
|
+ if (objMap.get('event') === null) {
|
|
|
+ if (beforeEvent === undefined) {
|
|
|
+ let idx = dateArr.findIndex(key => dateMap.get(key).get('event') !== null);
|
|
|
+ let key = dateArr[idx];
|
|
|
+ beforeEvent = dateMap.get(key).get('event');
|
|
|
+ }
|
|
|
+ dateMap.get(date).set('event', beforeEvent);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ beforeEvent = objMap.get('event');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (objMap.get('sig') === null) {
|
|
|
+ if (beforeSig === undefined) {
|
|
|
+ for (let key of dateArr) {
|
|
|
+ if (dateMap.get(key).get('sig').size() !== 0) {
|
|
|
+ beforeSig = dateMap.get(key).get('sig');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dateMap.get(date).set('sig', beforeSig);
|
|
|
}
|
|
|
+ else {
|
|
|
+ beforeSig = objMap.get('sig');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const sigArr = dateMap.get(dateArr[0]).get('sig');
|
|
|
+ const eventObj = dateMap.get(dateArr[0]).get('event');
|
|
|
+
|
|
|
|
|
|
- lineMap.get(obj.service_id).push(position);
|
|
|
+
|
|
|
+ if (route_list && route_list.length) {
|
|
|
+ road = new EmergencyRoadObj(route_list);
|
|
|
+ road.setBound();
|
|
|
}
|
|
|
- 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]);
|
|
|
+
|
|
|
+ sigArr.forEach((obj)=>{
|
|
|
+ sig.set(obj.service_id + '_' + obj.seq_no, new EmergencySig(obj));
|
|
|
});
|
|
|
|
|
|
- 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)
|
|
|
+
|
|
|
+ if (selected.arr_lat && selected.arr_lng) {
|
|
|
+ arrive = new EmergencyMarker(getKakaoPosition(selected.arr_lat, selected.arr_lng), '/images/evp_arr.svg');
|
|
|
+ }
|
|
|
+ car = new EmergencyMarker(getKakaoPosition(eventObj.cur_lat, eventObj.cur_lng), '/images/car.svg');
|
|
|
+
|
|
|
+ let cnt = 1;
|
|
|
+ let timer = setInterval(()=>{
|
|
|
+ if (cnt === dateArr.length) {
|
|
|
+ return clearInterval(timer);
|
|
|
}
|
|
|
- })
|
|
|
+ const objMap = dateMap.get(dateArr[cnt]);
|
|
|
+ setEmergencyCurr(car, sig, road, arrive, objMap);
|
|
|
+ cnt++;
|
|
|
+ }, 500);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-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)
|
|
|
- });
|
|
|
+function setEmergencyCurr(car, sigMap, road, arrive, dataMap) {
|
|
|
+ const sigArr = dataMap.get('sig');
|
|
|
+ const eventObj = dataMap.get('event')
|
|
|
+ const eventCd = eventObj.event_cd;
|
|
|
+ if (eventCd === 1) {
|
|
|
+ const {cur_lat, cur_lng} = eventObj;
|
|
|
+ car.moveMarker(getKakaoPosition(cur_lat, cur_lng));
|
|
|
+ }
|
|
|
+ else if (eventCd === 2) {
|
|
|
+ car.hide();
|
|
|
+ sigArr.forEach((obj)=>{obj.hide()});
|
|
|
+ arrive.hide();
|
|
|
+ road.hide();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (sigArr && sigArr.length > 0) {
|
|
|
+ for (let sig of sigArr) {
|
|
|
+ const sigMarker = sigMap.get(sig.service_id + '_' + sig.seq_no);
|
|
|
+ if (sigMarker) {
|
|
|
+ if (!sigMarker.a_ring && !sigMarker.b_ring) {
|
|
|
+ sigMarker.createRing(sig);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const {a_head_lat, a_head_lng, a_mid_lat, a_mid_lng, a_end_lat, a_end_lng,
|
|
|
+ b_head_lat, b_head_lng, b_mid_lat, b_mid_lng, b_end_lat, b_end_lng} = sig;
|
|
|
+ const aPosition = [
|
|
|
+ getKakaoPosition(a_head_lat, a_head_lng),
|
|
|
+ getKakaoPosition(a_mid_lat, a_mid_lng),
|
|
|
+ getKakaoPosition(a_end_lat, a_end_lng),
|
|
|
+ ]
|
|
|
+ const bPosition = [
|
|
|
+ getKakaoPosition(b_head_lat, b_head_lng),
|
|
|
+ getKakaoPosition(b_mid_lat, b_mid_lng),
|
|
|
+ getKakaoPosition(b_end_lat, b_end_lng),
|
|
|
+ ]
|
|
|
+
|
|
|
+ // console.log(aPosition, bPosition);
|
|
|
+ sigMarker.a_ring.setPath(aPosition);
|
|
|
+ sigMarker.b_ring.setPath(bPosition);
|
|
|
+ }
|
|
|
+ sigMarker.setState(sig.state);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+}
|
|
|
+
|
|
|
+function drawEmergencyRoad(data) {
|
|
|
+ if (data && data.length) {
|
|
|
+ data.forEach((obj)=>{
|
|
|
+ const beforeObj = _EmergencyMap.get(obj.service_id);
|
|
|
+ if (!beforeObj) {
|
|
|
+ const emgObj = new EmergencyObj(obj);
|
|
|
+ if (_EmergencyMap.size === 0) {
|
|
|
+ emgObj.setBound();
|
|
|
+ }
|
|
|
|
|
|
- const marker = new kakao.maps.Marker({
|
|
|
- image: markImage,
|
|
|
- position: position,
|
|
|
+ _EmergencyMap.set(obj.service_id, emgObj);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ beforeObj.car.moveMarker(getKakaoPosition(obj.event_list[0].cur_lat, obj.event_list[0].cur_lng));
|
|
|
+ obj.phase_list.forEach((sigObj)=>{
|
|
|
+ const beforeSig = beforeObj.sig.get(sigObj.service_id + '_' + sigObj.seq_no);
|
|
|
+ if (beforeSig) {
|
|
|
+ const {a_head_lat, a_head_lng, a_mid_lat, a_mid_lng, a_end_lat, a_end_lng,
|
|
|
+ b_head_lat, b_head_lng, b_mid_lat, b_mid_lng, b_end_lat, b_end_lng, state} = sigObj
|
|
|
+ beforeSig.setState(state);
|
|
|
+ if (beforeSig.a_ring) {
|
|
|
+ const a_head = getKakaoPosition(a_head_lat, a_head_lng);
|
|
|
+ const a_mid = getKakaoPosition(a_mid_lat, a_mid_lng);
|
|
|
+ const a_end = getKakaoPosition(a_end_lat, a_end_lng);
|
|
|
+ beforeSig.a_ring.setPath([a_head, a_mid, a_end]);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (beforeSig.b_ring) {
|
|
|
+ const b_head = getKakaoPosition(b_head_lat, b_head_lng);
|
|
|
+ const b_mid = getKakaoPosition(b_mid_lat, b_mid_lng);
|
|
|
+ const b_end = getKakaoPosition(b_end_lat, b_end_lng);
|
|
|
+ beforeSig.b_ring.setPath([b_head, b_mid, b_end]);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (beforeSig.a_ring === null && beforeSig.b_ring === null) {
|
|
|
+ beforeSig.createRing(sigObj);
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
- markerMap.set(obj.service_id, marker);
|
|
|
}
|
|
|
+ });
|
|
|
|
|
|
- lineMap.get(obj.service_id).push(position);
|
|
|
+ if (_EmergencyMap.size !== data.length) {
|
|
|
+ const keyArr = Array.from(_EmergencyMap.keys());
|
|
|
+ for (let key of keyArr) {
|
|
|
+ let cnt = 0;
|
|
|
+ data.forEach((obj) => {
|
|
|
+ if (obj.service_id === key) {
|
|
|
+ cnt++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (cnt === 0) {
|
|
|
+ const sigObj = _EmergencyMap.get(key).sig;
|
|
|
+ sigMap.delete(sigObj.lat + '_' + sigObj.lng);
|
|
|
+ _EmergencyMap.get(key).clear();
|
|
|
+ _EmergencyMap.delete(key);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- 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,
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (_EmergencyMap.size > 0) {
|
|
|
+ _EmergencyMap.forEach((obj)=>{
|
|
|
+ obj.clear();
|
|
|
});
|
|
|
+ _EmergencyMap.clear();
|
|
|
+ }
|
|
|
+ // clearEmgMarker();
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
|
|
|
- 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 clearEmgMarker() {
|
|
|
+ if (_EmergencyMap.size > 0) {
|
|
|
+ _EmergencyMap.forEach((obj)=>{
|
|
|
+ obj.get('marker').setMap(null);
|
|
|
+ obj.get('line')[0].setMap(null);
|
|
|
+ obj.get('line')[1].setMap(null);
|
|
|
+ const circleArr = obj.get('circle');
|
|
|
+ if (circleArr && circleArr.length) {
|
|
|
+ for(let circle of circleArr) {
|
|
|
+ circle.setMap(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
- })
|
|
|
+ _EmergencyMap.clear();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function moveMarker(position, marker) {
|
|
|
@@ -419,7 +404,7 @@ function customOverlayFnc(intNm, xCoord, yCoord) {
|
|
|
customOverlay = new kakao.maps.CustomOverlay({
|
|
|
position: position,
|
|
|
content: content,
|
|
|
- yAnchor: 1,
|
|
|
+ // yAnchor: 1,
|
|
|
zIndex: 100
|
|
|
});
|
|
|
// 커스텀 오버레이를 지도에 표시합니다
|
|
|
@@ -857,6 +842,7 @@ function getDrawRoad() {
|
|
|
|
|
|
// 마우스로 클릭한 위치입니다
|
|
|
var clickPosition = mouseEvent.latLng;
|
|
|
+ console.log(clickPosition);
|
|
|
// 지도 클릭이벤트가 발생했는데 선을 그리고있는 상태가 아니면
|
|
|
if (!drawingFlag) {
|
|
|
//거리재기초기화
|
|
|
@@ -1571,82 +1557,84 @@ function moveToPosition() {
|
|
|
mapZoomBound();
|
|
|
}
|
|
|
|
|
|
-class emergencyRoad{
|
|
|
- constructor({service_id, coordinateArr}) {
|
|
|
+
|
|
|
+class EmergencyObj{
|
|
|
+ constructor({ arr_lat, arr_lng, arr_tm, clct_dt,
|
|
|
+ cur_lat, cur_lng, ev_no, ocr_no, ocr_type,
|
|
|
+ phase_list, route_list, service_dist,
|
|
|
+ service_id, service_nm, status_cd, veh_len, event_list }) {
|
|
|
+ this.arr_lat = arr_lat;
|
|
|
+ this.arr_lng = arr_lng;
|
|
|
+ this.arr_tm = arr_tm;
|
|
|
+ this.clct_dt = clct_dt;
|
|
|
+ this.cur_lat = cur_lat;
|
|
|
+ this.cur_lng = cur_lng;
|
|
|
+ this.ev_no = ev_no;
|
|
|
+ this.ocr_no = ocr_no;
|
|
|
+ this.ocr_type = ocr_type;
|
|
|
+ this.phase_list = phase_list;
|
|
|
+ this.route_list = route_list;
|
|
|
+ this.service_dist = service_dist;
|
|
|
this.service_id = service_id;
|
|
|
- this.coordinateArr = coordinateArr;
|
|
|
- this.backPoly = null;
|
|
|
- this.polyLine = null;
|
|
|
+ this.service_nm = service_nm;
|
|
|
+ this.status_cd = status_cd;
|
|
|
+ this.veh_len = veh_len;
|
|
|
+ this.road = null;
|
|
|
+ this.sig = new Map();
|
|
|
+ this.car = null;
|
|
|
+ this.arrive = null;
|
|
|
+ this.event_list = event_list;
|
|
|
+ this.init();
|
|
|
}
|
|
|
|
|
|
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,
|
|
|
- });
|
|
|
+ this.road = new EmergencyRoadObj(this.route_list);
|
|
|
+ if (this.phase_list && this.phase_list.length) {
|
|
|
+ this.phase_list.forEach((obj)=>{
|
|
|
+ const sig = new EmergencySig(obj);
|
|
|
+ this.sig.set(obj.service_id + '_' + obj.seq_no, sig);
|
|
|
+ })
|
|
|
}
|
|
|
+ this.car = new EmergencyMarker(getKakaoPosition(this.event_list[0].cur_lat, this.event_list[0].cur_lng), '/images/car.svg');
|
|
|
+ this.arrive = new EmergencyMarker(getKakaoPosition(this.arr_lat, this.arr_lng), '/images/evp_arr.svg');
|
|
|
}
|
|
|
|
|
|
- drawPolyLine() {
|
|
|
- if (this.polyLine && this.backPoly) {
|
|
|
- this.polyLine.setMap(map);
|
|
|
- this.backPoly.setMap(map);
|
|
|
+ clear() {
|
|
|
+ if (this.road) {
|
|
|
+ this.road.hide();
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- hidePolyLine() {
|
|
|
- if (this.polyLine && this.backPoly) {
|
|
|
- this.polyLine.setMap(null);
|
|
|
- this.backPoly.setMap(null);
|
|
|
+ if (this.sig && this.sig.length) {
|
|
|
+ this.sig.forEach((obj)=>{
|
|
|
+ obj.hide();
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.car) {
|
|
|
+ this.car.hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.arrive) {
|
|
|
+ this.arrive.hide();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
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));
|
|
|
+ bounds.extend(getKakaoPosition(this.cur_lat, this.cur_lng));
|
|
|
+ bounds.extend(getKakaoPosition(this.arr_lat, this.arr_lng));
|
|
|
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}) {
|
|
|
+ constructor({service_id, node_id, ring, phase_no, 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;
|
|
|
@@ -1657,6 +1645,7 @@ class Ring{
|
|
|
this.head_angle = head_angle;
|
|
|
this.end_angle = end_angle;
|
|
|
this.state = state;
|
|
|
+ this.init();
|
|
|
}
|
|
|
|
|
|
init() {
|
|
|
@@ -1679,13 +1668,13 @@ class Ring{
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- drawLine() {
|
|
|
+ show() {
|
|
|
if (this.polyLine) {
|
|
|
this.polyLine.setMap(map);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- hideLine() {
|
|
|
+ hide() {
|
|
|
if (this.polyLine) {
|
|
|
this.polyLine.setMap(null);
|
|
|
}
|
|
|
@@ -1702,17 +1691,30 @@ class Ring{
|
|
|
this.polyLine.setOptions(option);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ setState(color) {
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setOptions({
|
|
|
+ strokeColor : color,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-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}) {
|
|
|
+const sigMap = new Map();
|
|
|
+
|
|
|
+class EmergencySig{
|
|
|
+ constructor({clct_dt, service_id, node_id, node_nm, lat, lng, rem_dist, state, plan_class, a_ring_phase, b_ring_phase,
|
|
|
+ hold_phase, a_flow_no, a_head_angle, a_end_angle, a_head_lat, a_head_lng, a_mid_lat, a_mid_lng, a_end_lat,
|
|
|
+ a_end_lng, b_flow_no, b_head_angle, b_end_angle, b_head_lat, b_head_lng, b_mid_lat, b_mid_lng, b_end_lat,
|
|
|
+ b_end_lng, seq_no}) {
|
|
|
+ this.seq_no = seq_no;
|
|
|
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;
|
|
|
@@ -1721,7 +1723,26 @@ class Sig{
|
|
|
this.hold_phase = hold_phase;
|
|
|
this.a_ring = null;
|
|
|
this.b_ring = null;
|
|
|
- this.marker = null;
|
|
|
+ this.circle = null;
|
|
|
+ this.a_flow_no = a_flow_no;
|
|
|
+ this.b_flow_no = b_flow_no;
|
|
|
+ this.a_head_angle = a_head_angle;
|
|
|
+ this.b_head_angle = b_head_angle;
|
|
|
+ this.a_end_angle = a_end_angle;
|
|
|
+ this.b_end_angle = b_end_angle;
|
|
|
+ this.a_head_lat = a_head_lat;
|
|
|
+ this.a_head_lng = a_head_lng;
|
|
|
+ this.b_head_lat = b_head_lat;
|
|
|
+ this.b_head_lng = b_head_lng;
|
|
|
+ this.a_mid_lat = a_mid_lat;
|
|
|
+ this.a_mid_lng = a_mid_lng;
|
|
|
+ this.b_mid_lat = b_mid_lat;
|
|
|
+ this.b_mid_lng = b_mid_lng;
|
|
|
+ this.a_end_lat = a_end_lat;
|
|
|
+ this.a_end_lng = a_end_lng;
|
|
|
+ this.b_end_lat = b_end_lat;
|
|
|
+ this.b_end_lng = b_end_lng;
|
|
|
+ this.init();
|
|
|
}
|
|
|
|
|
|
init() {
|
|
|
@@ -1729,40 +1750,238 @@ class Sig{
|
|
|
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
|
|
|
- });
|
|
|
+ const position = getKakaoPosition(this.lat, this.lng);
|
|
|
+ if (!sigMap.get(this.lat + '_' + this.lng)) {
|
|
|
+ this.circle = new kakao.maps.Circle({
|
|
|
+ center : position, // 원의 중심좌표 입니다
|
|
|
+ radius: 60, // 미터 단위의 원의 반지름입니다
|
|
|
+ strokeWeight: 5, // 선의 두께입니다
|
|
|
+ strokeColor: stateColor, // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일 입니다
|
|
|
+ fillColor: stateColor, // 채우기 색깔입니다
|
|
|
+ fillOpacity: 0.3, // 채우기 불투명도 입니다
|
|
|
+ zIndex: 2,
|
|
|
+ name : '신호현시',
|
|
|
+ });
|
|
|
+ sigMap.set(this.lat + '_' + this.lng, this.circle);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.createRing(this);
|
|
|
+
|
|
|
+ //if (map.getLevel() < 5) {
|
|
|
+ // this.circle.setMap(map);
|
|
|
+ // this.a_ring.show();
|
|
|
+ // this.b_ring.show();
|
|
|
+ this.show();
|
|
|
+ //}
|
|
|
+ }
|
|
|
+
|
|
|
+ createRing(data) {
|
|
|
+ const stateArr = [1,2,4,5];
|
|
|
+ if (stateArr.includes(data.state)) {
|
|
|
+ this.a_ring = new Ring({
|
|
|
+ service_id : data.service_id,
|
|
|
+ node_id : data.node_id,
|
|
|
+ ring : 1,
|
|
|
+ phase_no : data.a_ring_phase,
|
|
|
+ flow_no : data.a_flow_no,
|
|
|
+ head_lat : data.a_head_lat,
|
|
|
+ head_lng : data.a_head_lng,
|
|
|
+ mid_lat : data.a_mid_lat,
|
|
|
+ mid_lng : data.a_mid_lng,
|
|
|
+ end_lag : data.a_end_lat,
|
|
|
+ end_lng : data.a_end_lng,
|
|
|
+ head_angle : data.a_head_angle,
|
|
|
+ end_angle : data.a_end_angle,
|
|
|
+ state : data.state
|
|
|
+ });
|
|
|
+
|
|
|
+ this.b_ring = new Ring({
|
|
|
+ service_id : data.service_id,
|
|
|
+ node_id : data.node_id,
|
|
|
+ ring : 2,
|
|
|
+ phase_no : data.b_ring_phase,
|
|
|
+ flow_no : data.b_flow_no,
|
|
|
+ head_lat : data.b_head_lat,
|
|
|
+ head_lng : data.b_head_lng,
|
|
|
+ mid_lat : data.b_mid_lat,
|
|
|
+ mid_lng : data.b_mid_lng,
|
|
|
+ end_lag : data.b_end_lat,
|
|
|
+ end_lng : data.b_end_lng,
|
|
|
+ head_angle : data.b_head_angle,
|
|
|
+ end_angle : data.b_end_angle,
|
|
|
+ state : data.state
|
|
|
+ });
|
|
|
+
|
|
|
+ this.a_ring.show();
|
|
|
+ this.b_ring.show();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- drawMarker() {
|
|
|
- this.marker.setMap(map);
|
|
|
+ getStateColor(state) {
|
|
|
+ let stateColor = '#FF0000';
|
|
|
+ if (!isNaN(Number(state))) {
|
|
|
+ stateColor = stateMap.get(Number(state));
|
|
|
+ }
|
|
|
+ return stateColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ setState(state) {
|
|
|
+ const stateColor = this.getStateColor(state);
|
|
|
+ if (this.circle) {
|
|
|
+ this.circle.setOptions({
|
|
|
+ strokeColor: stateColor,
|
|
|
+ fillColor : stateColor,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
if (this.a_ring) {
|
|
|
- this.a_ring.setMap(map);
|
|
|
+ this.a_ring.setState(stateColor);
|
|
|
}
|
|
|
+
|
|
|
if (this.b_ring) {
|
|
|
- this.b_ring.setMap(map);
|
|
|
+ this.b_ring.setState(stateColor);
|
|
|
}
|
|
|
}
|
|
|
+ show() {
|
|
|
+ if (this.circle) {
|
|
|
+ this.circle.setMap(map);
|
|
|
+ }
|
|
|
|
|
|
- hideMarker() {
|
|
|
- this.marker.setMap(null);
|
|
|
if (this.a_ring) {
|
|
|
- this.a_ring.setMap(null);
|
|
|
+ this.a_ring.show();
|
|
|
}
|
|
|
+
|
|
|
if (this.b_ring) {
|
|
|
- this.b_ring.setMap(null);
|
|
|
+ this.b_ring.show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ hide() {
|
|
|
+ if (this.circle) {
|
|
|
+ this.circle.setMap(null);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.a_ring) {
|
|
|
+ this.a_ring.hide();
|
|
|
+ }
|
|
|
+ if (this.b_ring) {
|
|
|
+ this.b_ring.hide();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setCenter() {
|
|
|
map.setCenter(getKakaoPosition(this.lng, this.lat));
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class EmergencyRoadObj{
|
|
|
+ constructor(pathArr) {
|
|
|
+ this.pathArr = pathArr;
|
|
|
+ this.backPolyLine = null;
|
|
|
+ this.polyLine = null;
|
|
|
+ this.kakaoPathArr = [];
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+
|
|
|
+ if (this.pathArr && this.pathArr.length) {
|
|
|
+ this.pathArr.forEach((obj)=>{
|
|
|
+ this.kakaoPathArr.push(getKakaoPosition(obj.lat, obj.lng));
|
|
|
+ });
|
|
|
+
|
|
|
+ this.backPolyLine = new kakao.maps.Polyline({
|
|
|
+ path: this.kakaoPathArr, // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
|
|
|
+ strokeWeight: 10, // 선의 두께입니다
|
|
|
+ strokeColor: '#ffffff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 1,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
|
|
|
+ this.polyLine = new kakao.maps.Polyline({
|
|
|
+ strokeWeight: 8, // 선의 두께입니다
|
|
|
+ path: this.kakaoPathArr,
|
|
|
+ strokeColor: '#3386ff', // 선의 색깔입니다
|
|
|
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
|
+ strokeStyle: 'solid', // 선의 스타일입니다
|
|
|
+ zIndex: 2,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ show() {
|
|
|
+ if (this.backPolyLine) {
|
|
|
+ this.backPolyLine.setMap(map);
|
|
|
+ }
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setMap(map);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ hide() {
|
|
|
+ if (this.backPolyLine) {
|
|
|
+ this.backPolyLine.setMap(null);
|
|
|
+ }
|
|
|
+ if (this.polyLine) {
|
|
|
+ this.polyLine.setMap(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setBound() {
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ bounds.extend(this.kakaoPathArr[0]);
|
|
|
+ bounds.extend(this.kakaoPathArr[this.pathArr.length - 1]);
|
|
|
+ map.setBounds(bounds);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class EmergencyMarker{
|
|
|
+ constructor(position, img) {
|
|
|
+ this.position = position;
|
|
|
+ this.marker = null;
|
|
|
+ this.imgSrc = img;
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ const imgSrc = this.imgSrc;
|
|
|
+ let markImage = new kakao.maps.MarkerImage(
|
|
|
+ imgSrc,
|
|
|
+ new kakao.maps.Size(32, 39), {
|
|
|
+ offset: new kakao.maps.Point(16, 39)
|
|
|
+ });
|
|
|
+
|
|
|
+ const position = this.position;
|
|
|
+ this.marker = new kakao.maps.Marker({
|
|
|
+ image: markImage,
|
|
|
+ position: position,
|
|
|
+ zIndex: 11
|
|
|
+ });
|
|
|
+ this.show();
|
|
|
+ }
|
|
|
+
|
|
|
+ show() {
|
|
|
+ if (this.marker) {
|
|
|
+ this.marker.setMap(map);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ hide() {
|
|
|
+ if (this.marker) {
|
|
|
+ this.marker.setMap(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ moveMarker(position) {
|
|
|
+ if (this.marker) {
|
|
|
+ this.marker.setPosition(position);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
