|
|
|
@ -4,8 +4,8 @@ import { useDispatch, useSelector } 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/new_drone_icon_org.svg'; |
|
|
|
|
import DronDetailIcon from '../../../../assets/images/new_drone_icon_pp.svg'; |
|
|
|
|
import DronIcon from '../../../../assets/images/drone-marker-icon.png'; |
|
|
|
|
import DronDetailIcon from '../../../../assets/images/drone-marker-icon-pulple.png'; |
|
|
|
|
import { IoMdAirplane } from 'react-icons/io'; |
|
|
|
|
import { |
|
|
|
|
controlGpDtlAction, |
|
|
|
@ -136,7 +136,7 @@ export const DronMarker = props => {
|
|
|
|
|
controlId: controlId, |
|
|
|
|
type: markerOption.type, |
|
|
|
|
icon: { |
|
|
|
|
content: `<img src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg)">`, |
|
|
|
|
content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg)">`, |
|
|
|
|
origin: markerOption.origin, |
|
|
|
|
anchor: markerOption.anchor |
|
|
|
|
}, |
|
|
|
@ -192,6 +192,7 @@ export const DronMarker = props => {
|
|
|
|
|
const getIcon = marker.getIcon(); |
|
|
|
|
|
|
|
|
|
marker.setPosition(position); |
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
|
controlGpArcrftWarnList?.filter(i => i.cntrlId === gps.controlId).length > |
|
|
|
|
0 |
|
|
|
@ -200,7 +201,7 @@ export const DronMarker = props => {
|
|
|
|
|
marker.setIcon({ |
|
|
|
|
content: `<img ${getIcon.content.substr( |
|
|
|
|
getIcon.content.indexOf('src'), |
|
|
|
|
getIcon.content.indexOf('.svg') |
|
|
|
|
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%)" />`,
|
|
|
|
@ -210,12 +211,20 @@ export const DronMarker = props => {
|
|
|
|
|
marker.setIcon({ |
|
|
|
|
content: `<img ${getIcon.content.substr( |
|
|
|
|
getIcon.content.indexOf('src'), |
|
|
|
|
getIcon.content.indexOf('.svg') |
|
|
|
|
getIcon.content.indexOf('alt') - 6 |
|
|
|
|
)} alt="" style="transform: rotate(${gps.heading}deg); " />`,
|
|
|
|
|
anchor: getIcon.anchor |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
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) => { |
|
|
|
|