7 changed files with 857 additions and 149 deletions
@ -0,0 +1,657 @@ |
|||||||
|
import $ from 'jquery'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useDispatch, useSelector, shallowEqual } from 'react-redux'; |
||||||
|
import '../../../../assets/css/custom.css'; |
||||||
|
import FlightIcon from '../../../../assets/images/airplan_org.svg'; |
||||||
|
import FlightDetailIcon from '../../../../assets/images/airplan_pp.svg'; |
||||||
|
import DronIcon from '../../../../assets/images/drone-marker-icon.png'; |
||||||
|
import DronDetailIcon from '../../../../assets/images/drone-marker-icon-pulple.png'; |
||||||
|
import DronUamIcon from '../../../../assets/images/uam_icon.png'; |
||||||
|
import DronUamDetailIcon from '../../../../assets/images/uam_icon_purple.png'; |
||||||
|
import { |
||||||
|
controlGpDtlAction, |
||||||
|
controlGpFlightPlanAction, |
||||||
|
controlGpCountAction |
||||||
|
} from '../../../../modules/control/gp'; |
||||||
|
import { |
||||||
|
objectClickAction, |
||||||
|
objectUnClickAction |
||||||
|
} from '../../../../modules/control/map/actions/controlMapActions'; |
||||||
|
import { JOIN_LIST } from '../../../../modules/basis/group/actions/basisGroupAction'; |
||||||
|
|
||||||
|
export const DronMarker = props => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const { controlGpList, controlGroupAuthInfo } = useSelector( |
||||||
|
state => state.controlGpState |
||||||
|
); |
||||||
|
const { objectId, isClickObject } = useSelector( |
||||||
|
state => state.controlMapReducer, |
||||||
|
shallowEqual |
||||||
|
); |
||||||
|
// const { controlGroupAuthInfo } = useSelector(
|
||||||
|
// state => state.controlGroupAuthState
|
||||||
|
// );
|
||||||
|
const { controlGpArcrftWarnList } = useSelector( |
||||||
|
state => state.controlGpLogState |
||||||
|
); |
||||||
|
|
||||||
|
const { user } = useSelector(state => state.authState); |
||||||
|
const { joinList } = useSelector(state => state.groupState); |
||||||
|
|
||||||
|
const [arrMarkers, setArrMarkers] = useState([]); |
||||||
|
const [arrInfos, setArrInfos] = useState([]); |
||||||
|
|
||||||
|
const [count, setCount] = useState({ |
||||||
|
drone: [], |
||||||
|
flight: [] |
||||||
|
}); |
||||||
|
|
||||||
|
let mapboxgl = props.mapboxgl; |
||||||
|
let map = props.map; |
||||||
|
let CustomOverlay; |
||||||
|
let infoWindow; |
||||||
|
// const infowindowOpen = data => {
|
||||||
|
// const content = `
|
||||||
|
// <div class="dblock-box">
|
||||||
|
// <div class="dblock-ti">
|
||||||
|
// <span>${data?.id}</span>
|
||||||
|
// </div>
|
||||||
|
// <div class="dblock-txt>
|
||||||
|
// <div class="dblock-txt-list">
|
||||||
|
// <div>
|
||||||
|
// <span style="width: 250px; display: inline-block;">${
|
||||||
|
// data?.speed
|
||||||
|
// }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
|
||||||
|
// data?.heading
|
||||||
|
// }</span>
|
||||||
|
// <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
|
||||||
|
// 6
|
||||||
|
// )} | ${(data?.coord._lng).toFixed(6)}</span>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// `;
|
||||||
|
|
||||||
|
// infoWindow = new naver.maps.InfoWindow({
|
||||||
|
// class: 'tooltip-dblock',
|
||||||
|
// content: content,
|
||||||
|
// maxWidth: 160,
|
||||||
|
// backgroundColor: '#283046', //박스안쪽영역 컬러
|
||||||
|
// // borderColor: '#333', //테두리컬러
|
||||||
|
// // borderWidth: 3, //테두리 굵기
|
||||||
|
// // anchorSize: new naver.maps.Size(30, -10),
|
||||||
|
// anchorSkew: false,
|
||||||
|
// anchorColor: '#283046',
|
||||||
|
|
||||||
|
// pixelOffset: new naver.maps.Point(20, -20)
|
||||||
|
// });
|
||||||
|
|
||||||
|
// infoWindow.open(props.map, data.coord);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// useLayoutEffect(() => {
|
||||||
|
// dispatch(controlGroupAuthAction.request());
|
||||||
|
// }, [controlGpList]);
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (count.drone.length > 0 || count.flight.length > 0) { |
||||||
|
dispatch( |
||||||
|
controlGpCountAction.request({ |
||||||
|
count |
||||||
|
}) |
||||||
|
); |
||||||
|
} else { |
||||||
|
const count = { |
||||||
|
drone: [], |
||||||
|
flight: [] |
||||||
|
}; |
||||||
|
dispatch( |
||||||
|
controlGpCountAction.request({ |
||||||
|
count |
||||||
|
}) |
||||||
|
); |
||||||
|
} |
||||||
|
}, [count]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
dispatch( |
||||||
|
JOIN_LIST.request({ |
||||||
|
cstmrSno: user?.cstmrSno |
||||||
|
}) |
||||||
|
); |
||||||
|
}, []); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (arrMarkers.length != 0) { |
||||||
|
markerInfo(arrMarkers); |
||||||
|
} |
||||||
|
}, [arrMarkers]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
markerInit(); |
||||||
|
}, [controlGpList]); |
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// let imageUrl;
|
||||||
|
// arrMarkers.map(clickMarker => {
|
||||||
|
// if (objectId === clickMarker.controlId && isClickObject) {
|
||||||
|
// // console.log(clickMarker.gps.objectId, '><><');
|
||||||
|
// imageUrl =
|
||||||
|
// // clickMarker.type === 'DRONE' ? DronUamDetailIcon : FlightDetailIcon;
|
||||||
|
// clickMarker.type === 'DRONE'
|
||||||
|
// ? clickMarker.gps.objectId.includes('UAM')
|
||||||
|
// ? DronUamDetailIcon
|
||||||
|
// : DronDetailIcon
|
||||||
|
// : FlightDetailIcon;
|
||||||
|
// clickMarker.setIcon({
|
||||||
|
// content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
|
||||||
|
// origin: new naver.maps.Point(0, 0),
|
||||||
|
// anchor: new naver.maps.Point(15, 15)
|
||||||
|
// });
|
||||||
|
// } else {
|
||||||
|
// // imageUrl = clickMarker.type === 'DRONE' ? DronUamIcon : FlightIcon;
|
||||||
|
// imageUrl =
|
||||||
|
// clickMarker.type === 'DRONE'
|
||||||
|
// ? clickMarker.gps.objectId.includes('UAM')
|
||||||
|
// ? DronUamIcon
|
||||||
|
// : DronIcon
|
||||||
|
// : FlightIcon;
|
||||||
|
// clickMarker.setIcon({
|
||||||
|
// content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
|
||||||
|
// origin: new naver.maps.Point(0, 0),
|
||||||
|
// anchor: new naver.maps.Point(15, 15)
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }, [objectId, isClickObject]);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// arrMarkers.map(clickMarker => {
|
||||||
|
// if (objectId === clickMarker.controlId) {
|
||||||
|
// dispatch(controlGpDtlAction.request(objectId));
|
||||||
|
// props.map.setCenter(clickMarker.getPosition());
|
||||||
|
// props.map.setZoom(13, true);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }, [objectId]);
|
||||||
|
|
||||||
|
//마커를 그린다.
|
||||||
|
const addMarkers = (position, id, controlId, gps) => { |
||||||
|
const gpsCnt = { |
||||||
|
gps: gps, |
||||||
|
type: '' |
||||||
|
}; |
||||||
|
|
||||||
|
const markerOption = {}; |
||||||
|
|
||||||
|
if (id.substring(0, 2) === 'PA') { |
||||||
|
const pal = controlGroupAuthInfo?.find( |
||||||
|
prev => prev.idntfNum === gps.objectId |
||||||
|
); |
||||||
|
if (pal || !pal || id.includes('NAMWON')) { |
||||||
|
if (id.includes('UAM')) { |
||||||
|
markerOption.url = DronUamIcon; |
||||||
|
} else { |
||||||
|
markerOption.url = DronIcon; |
||||||
|
} |
||||||
|
|
||||||
|
markerOption.type = 'DRONE'; |
||||||
|
gpsCnt.type = 'drone'; |
||||||
|
} else { |
||||||
|
if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') { |
||||||
|
markerOption.url = FlightIcon; |
||||||
|
markerOption.type = 'FLIGHT'; |
||||||
|
gpsCnt.type = 'flight'; |
||||||
|
} else { |
||||||
|
const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId); |
||||||
|
if ( |
||||||
|
terminal?.groupAuthCd === 'MASTER' || |
||||||
|
terminal?.groupAuthCd === 'LEADER' |
||||||
|
) { |
||||||
|
markerOption.url = FlightIcon; |
||||||
|
markerOption.type = 'FLIGHT'; |
||||||
|
gpsCnt.type = 'flight'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') { |
||||||
|
markerOption.url = FlightIcon; |
||||||
|
markerOption.type = 'FLIGHT'; |
||||||
|
gpsCnt.type = 'flight'; |
||||||
|
} else { |
||||||
|
const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId); |
||||||
|
if ( |
||||||
|
terminal?.groupAuthCd === 'MASTER' || |
||||||
|
terminal?.groupAuthCd === 'LEADER' |
||||||
|
) { |
||||||
|
markerOption.url = FlightIcon; |
||||||
|
markerOption.type = 'FLIGHT'; |
||||||
|
gpsCnt.type = 'flight'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (gpsCnt.type === 'drone') { |
||||||
|
setCount(prev => ({ |
||||||
|
...prev, |
||||||
|
drone: [...prev.drone, gpsCnt] |
||||||
|
})); |
||||||
|
} else if (gpsCnt.type === 'flight') { |
||||||
|
setCount(prev => ({ |
||||||
|
...prev, |
||||||
|
flight: [...prev.flight, gpsCnt] |
||||||
|
})); |
||||||
|
} |
||||||
|
|
||||||
|
// if (id.substring(0, 2) === 'PA') {
|
||||||
|
// const pal = controlGroupAuthInfo?.find(
|
||||||
|
// prev => prev.idntfNum === gps.objectId
|
||||||
|
// );
|
||||||
|
// markerOption.url = pal ? DronIcon : FlightIcon;
|
||||||
|
// markerOption.type = pal ? 'DRONE' : 'FLIGHT';
|
||||||
|
// } else {
|
||||||
|
// markerOption.url = FlightIcon;
|
||||||
|
// markerOption.type = 'FLIGHT';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// markerOption.origin = new naver.maps.Point(0, 0);
|
||||||
|
// markerOption.anchor = new naver.maps.Point(15, 15);
|
||||||
|
|
||||||
|
// const marker = new naver.maps.Marker({
|
||||||
|
// position: position,
|
||||||
|
// title: id,
|
||||||
|
// id: id,
|
||||||
|
// controlId: controlId,
|
||||||
|
// type: markerOption.type,
|
||||||
|
// icon: {
|
||||||
|
// content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
|
||||||
|
// origin: markerOption.origin,
|
||||||
|
// anchor: markerOption.anchor
|
||||||
|
// },
|
||||||
|
// gps: gps
|
||||||
|
// });
|
||||||
|
// marker.setMap(props.map);
|
||||||
|
const el = document.createElement('img'); |
||||||
|
el.id = id; |
||||||
|
el.src = markerOption.url; |
||||||
|
el.style.transform = `rotate(${gps.heading}deg)`; |
||||||
|
|
||||||
|
const marker = new props.mapboxgl.Marker({ |
||||||
|
element: el, |
||||||
|
rotation: gps.heading |
||||||
|
}) |
||||||
|
.setLngLat(position) |
||||||
|
.addTo(props.map); |
||||||
|
marker.id = id; |
||||||
|
marker.title = id; |
||||||
|
marker.controlId = controlId; |
||||||
|
marker.type = markerOption.type; |
||||||
|
marker.gps = gps; |
||||||
|
marker.position = position; |
||||||
|
marker.icon = { |
||||||
|
content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`, |
||||||
|
origin: markerOption.origin, |
||||||
|
anchor: markerOption.anchor |
||||||
|
}; |
||||||
|
|
||||||
|
dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
|
||||||
|
// dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
|
||||||
|
|
||||||
|
/** drone 상세보기 */ |
||||||
|
marker.getElement().addEventListener('click', function (e) { |
||||||
|
handlerDronClick(marker.controlId, marker.id); |
||||||
|
}); |
||||||
|
|
||||||
|
if (markerOption.url) { |
||||||
|
setArrMarkers(m => [...m, marker]); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handlerDronClick = (controlId, idntfNum) => { |
||||||
|
// get detail, history, flight-plan
|
||||||
|
dispatch(objectClickAction(controlId)); |
||||||
|
// dispatch(controlGpDtlAction.request(controlId));
|
||||||
|
// dispatch(controlGpFlightPlanAction.request(idntfNum));
|
||||||
|
}; |
||||||
|
|
||||||
|
//마커를 삭제 한다.
|
||||||
|
const removeMarkers = marker => { |
||||||
|
// marker.setMap(null);
|
||||||
|
marker.remove(); |
||||||
|
}; |
||||||
|
|
||||||
|
const removeInfos = info => { |
||||||
|
// info.setMap(null);
|
||||||
|
info.remove(); |
||||||
|
}; |
||||||
|
|
||||||
|
//마커에 위치를 이동한다.
|
||||||
|
const moveMarkers = (marker, position, gps) => { |
||||||
|
const getIcon = marker.icon; |
||||||
|
|
||||||
|
marker.setLngLat(position); |
||||||
|
const warnList = controlGpArcrftWarnList?.filter( |
||||||
|
i => i.cntrlId === gps.controlId |
||||||
|
); |
||||||
|
|
||||||
|
if (warnList?.length > 0) { |
||||||
|
if (warnList[0].controlWarnCd) { |
||||||
|
// marker.setIcon({
|
||||||
|
// content: `<img ${getIcon.content.substr(
|
||||||
|
// getIcon.content.indexOf('src'),
|
||||||
|
// getIcon.content.indexOf('alt') - 6
|
||||||
|
// )} alt="" style="transform: rotate(${
|
||||||
|
// gps.heading
|
||||||
|
// }deg); filter: invert(16%) sepia(79%) saturate(4975%) hue-rotate(359deg) brightness(104%) contrast(129%)" />`,
|
||||||
|
// anchor: getIcon.anchor
|
||||||
|
// });
|
||||||
|
} else { |
||||||
|
// console.log(marker);
|
||||||
|
// marker.setIcon({
|
||||||
|
// content: `<img ${getIcon.content.substr(
|
||||||
|
// getIcon.content.indexOf('src'),
|
||||||
|
// getIcon.content.indexOf('alt') - 6
|
||||||
|
// )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
|
||||||
|
// anchor: getIcon.anchor
|
||||||
|
// });
|
||||||
|
marker.setRotation(gps.heading); |
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
marker.setRotation(gps.heading); |
||||||
|
// marker.setIcon({
|
||||||
|
// content: `<img ${getIcon.content.substr(
|
||||||
|
// getIcon.content.indexOf('src'),
|
||||||
|
// getIcon.content.indexOf('alt') - 6
|
||||||
|
// )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
|
||||||
|
// anchor: getIcon.anchor
|
||||||
|
// });
|
||||||
|
}; |
||||||
|
|
||||||
|
const moveInfos = (info, position, item, idx) => { |
||||||
|
if (info) { |
||||||
|
info.setLngLat([position.lng, position.lat]); |
||||||
|
// info.setPosition(position, info);
|
||||||
|
// // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
|
||||||
|
// // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
|
||||||
|
// info._element.html(`
|
||||||
|
// <div class="dblock-ti">
|
||||||
|
// <span>${info?._id}</span>
|
||||||
|
// </div>
|
||||||
|
// <div class="dblock-txt">
|
||||||
|
// <div class="dblock-txt-list">
|
||||||
|
// <span>${item?.elev}M</span>
|
||||||
|
// <span>${item?.speed}km</span>
|
||||||
|
// ${
|
||||||
|
// typeof item?.lat === 'number' && typeof item?.lng === 'number'
|
||||||
|
// ? `
|
||||||
|
// <span>
|
||||||
|
// ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
|
||||||
|
// </span>`
|
||||||
|
// : ''
|
||||||
|
// }
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// `);
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//데이터가 없는 마커를 모두 삭제 한다.
|
||||||
|
const allRemoveMarkers = () => { |
||||||
|
let isUnClick = false; |
||||||
|
if (arrMarkers && controlGpList) { |
||||||
|
arrMarkers.map(marker => { |
||||||
|
const isExists = controlGpList.find( |
||||||
|
item => item.objectId === marker.id |
||||||
|
); |
||||||
|
|
||||||
|
if (!isExists) { |
||||||
|
removeMarkers(marker); |
||||||
|
const arrData = arrMarkers.filter(item => item.id != marker.id); |
||||||
|
|
||||||
|
const drone = count.drone.filter(d => d.gps.objectId != marker.id); |
||||||
|
const flight = count.flight.filter(d => d.gps.objectId != marker.id); |
||||||
|
|
||||||
|
setCount({ |
||||||
|
drone: drone, |
||||||
|
flight: flight |
||||||
|
}); |
||||||
|
|
||||||
|
removeArrMarkers(arrData); |
||||||
|
if (marker.controlId === objectId) { |
||||||
|
dispatch(objectUnClickAction()); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
arrInfos.map(info => { |
||||||
|
const isExists = controlGpList.find(item => item.objectId === info._id); |
||||||
|
if (!isExists) { |
||||||
|
removeInfos(info); |
||||||
|
const arrData = arrInfos.filter(item => item.id != info._id); |
||||||
|
removeArrInfos(arrData); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
return isUnClick; |
||||||
|
}; |
||||||
|
|
||||||
|
//마커를 셋팅 한다.
|
||||||
|
const markerInit = () => { |
||||||
|
if (controlGpList) { |
||||||
|
allRemoveMarkers(); |
||||||
|
controlGpList.map((item, idx) => { |
||||||
|
// let position = new naver.maps.LatLng(item.lat, item.lng);
|
||||||
|
let position = new props.mapboxgl.LngLat(item.lng, item.lat); |
||||||
|
|
||||||
|
if (arrMarkers.length > 0) { |
||||||
|
const isExists = arrMarkers.find(ele => ele.id === item.objectId); |
||||||
|
const isInfos = arrInfos.find(info => info._id === item.objectId); |
||||||
|
if (isExists) { |
||||||
|
moveMarkers(isExists, position, item); |
||||||
|
moveInfos(isInfos, position, item, idx); |
||||||
|
} else { |
||||||
|
addMarkers(position, item.objectId, item.controlId, item); |
||||||
|
} |
||||||
|
} else { |
||||||
|
addMarkers(position, item.objectId, item.controlId, item); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//운항정보 창 셋팅
|
||||||
|
const infoInit = (marker, gps, idx) => { |
||||||
|
CustomOverlay = function (options) { |
||||||
|
this._element = $(` |
||||||
|
<div class="dblock-box"> |
||||||
|
<div class="dblock-ti"> |
||||||
|
<span>${marker?.id}</span> |
||||||
|
</div> |
||||||
|
<div class="dblock-txt"> |
||||||
|
<div class="dblock-txt-list"> |
||||||
|
<span>${gps?.elev}M</span> |
||||||
|
<span>${gps?.speed}km</span> |
||||||
|
${ |
||||||
|
typeof gps?.lat === 'number' && typeof gps?.lng === 'number' |
||||||
|
? ` |
||||||
|
<span> |
||||||
|
${(gps?.lat).toFixed(6)} ${(gps?.lng).toFixed(6)} |
||||||
|
</span>` |
||||||
|
: '' |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`);
|
||||||
|
|
||||||
|
// this._element = $(`
|
||||||
|
// <div class="tooltip-box" style="width: 150px;">
|
||||||
|
// <div class="tooltip-ti">
|
||||||
|
// <span>${marker?.id}</span>
|
||||||
|
// </div>
|
||||||
|
// <div class="tooltip-txt>
|
||||||
|
// <div class="tooltip-txt-list">
|
||||||
|
// <div>
|
||||||
|
// <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
|
||||||
|
// </div>
|
||||||
|
// <div>
|
||||||
|
// <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
|
||||||
|
// </div>
|
||||||
|
// <div>
|
||||||
|
// <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// `)
|
||||||
|
|
||||||
|
this.setPosition(options.position, idx); |
||||||
|
this.setMap(options.map || null); |
||||||
|
this.setId(options.id); |
||||||
|
this.setIdx(idx); |
||||||
|
this.setControlId(options.controlId); |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype = new naver.maps.OverlayView(); |
||||||
|
CustomOverlay.prototype.constructor = CustomOverlay; |
||||||
|
|
||||||
|
//메소드 재정의
|
||||||
|
//필수
|
||||||
|
CustomOverlay.prototype.onAdd = function () { |
||||||
|
let overlayLayer = this.getPanes().overlayLayer; |
||||||
|
|
||||||
|
this._element.appendTo(overlayLayer); |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.draw = function (idx) { |
||||||
|
if (!this.getMap()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
let projection = this.getProjection(), |
||||||
|
position = this.getPosition(), |
||||||
|
pixelPosition = projection.fromCoordToOffset(position); |
||||||
|
|
||||||
|
// let cnt = 0;
|
||||||
|
// let index = idx?._idx;
|
||||||
|
// cnt = index * 98;
|
||||||
|
this._element.css('left', pixelPosition.x); |
||||||
|
this._element.css('top', pixelPosition.y); |
||||||
|
// this._element.css('top', pixelPosition.y + -cnt)
|
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.onRemove = function () { |
||||||
|
let overlayLayer = this.getPanes().overlayLayer; |
||||||
|
|
||||||
|
this._element.remove(); |
||||||
|
this._element.off(); |
||||||
|
}; |
||||||
|
|
||||||
|
//속성
|
||||||
|
CustomOverlay.prototype.setPosition = function (position, idx) { |
||||||
|
this._position = position; |
||||||
|
this.draw(idx); |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.getPosition = function () { |
||||||
|
return this._position; |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.setId = function (id) { |
||||||
|
this._id = id; |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.getId = function () { |
||||||
|
return this._id; |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.setIdx = function (idx) { |
||||||
|
this._idx = idx; |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.getIdx = function () { |
||||||
|
return this._idx; |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.setControlId = function (controlId) { |
||||||
|
this._controlId = controlId; |
||||||
|
}; |
||||||
|
|
||||||
|
CustomOverlay.prototype.getControlId = function () { |
||||||
|
return this._controlId; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const removeArrMarkers = arrData => { |
||||||
|
setArrMarkers(arrData); |
||||||
|
}; |
||||||
|
|
||||||
|
const removeArrInfos = arrData => { |
||||||
|
setArrInfos(arrData); |
||||||
|
}; |
||||||
|
|
||||||
|
const markerInfo = arrMarkers => { |
||||||
|
arrMarkers.forEach((marker, idx) => { |
||||||
|
if (arrInfos.filter(i => i._controlId === marker.controlId).length > 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const info = new props.mapboxgl.Popup({ |
||||||
|
closeButton: false, |
||||||
|
closeOnClick: false |
||||||
|
}) |
||||||
|
.setLngLat([marker.position.lng, marker.position.lat]) |
||||||
|
.setHTML( |
||||||
|
` |
||||||
|
<div class="dblock-box"> |
||||||
|
<div class="dblock-ti"> |
||||||
|
<span>${marker?.id}</span> |
||||||
|
</div> |
||||||
|
<div class="dblock-txt"> |
||||||
|
<div class="dblock-txt-list"> |
||||||
|
<span>${marker.gps?.elev}M</span> |
||||||
|
<span>${marker.gps?.speed}km</span> |
||||||
|
${ |
||||||
|
typeof marker.gps?.lat === 'number' && |
||||||
|
typeof marker.gps?.lng === 'number' |
||||||
|
? ` |
||||||
|
<span> |
||||||
|
${(marker.gps?.lat).toFixed( |
||||||
|
6 |
||||||
|
)} ${(marker.gps?.lng).toFixed(6)} |
||||||
|
</span>` |
||||||
|
: '' |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
` |
||||||
|
) |
||||||
|
.addTo(props.map); |
||||||
|
// infoInit(marker, controlGpList[idx], idx);
|
||||||
|
info._id = marker.id; |
||||||
|
info.gps = marker.gps; |
||||||
|
// if (controlGpList.length != 0) {
|
||||||
|
// const info = new CustomOverlay({
|
||||||
|
// position: new naver.maps.LatLng(
|
||||||
|
// controlGpList[idx]?.lat,
|
||||||
|
// controlGpList[idx]?.lng
|
||||||
|
// ),
|
||||||
|
// // map: map,
|
||||||
|
// id: marker.id,
|
||||||
|
// idx: idx,
|
||||||
|
// controlId: marker.controlId
|
||||||
|
// });
|
||||||
|
// info.setMap(map);
|
||||||
|
|
||||||
|
setArrInfos(m => [...m, info]); |
||||||
|
// }
|
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return null; |
||||||
|
}; |
||||||
Loading…
Reference in new issue