import React, {useEffect, useMemo, useState} from 'react';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ level }, { width, highlight }) {
let color1;
if (level === 5) {
color1 = '#ec4e4e';
} else if (level === 6) {
color1 = '#1296db';
} else {
color1 = '#1296db';
}
if(level === 5){
return `
`;
}else if(level === 4){
return `
`;
}else{
return `
`;
}
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function AdcdMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
//console.log("zoom change",zoom);
}, [zoom]);
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.tuxiang + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [ highlight, zoom, layerVisible ]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'adcd',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
{
(data.level === 5 || data.level === 4) &&
<>
8 || distSq < dist2 || highlight)?'block':'none',
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: data.level === 4?6:4,//zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
// onClick={showPop}
>
8 || distSq < dist2 || highlight)?'block':'none',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: 3,//zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: data.level === 4? 'red':'#0008'
}}>
{data?.NAME}
}
{
data.level === 6 &&
<>
12 || distSq < dist2 || highlight)?'block':'none',
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: 2,//zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
// onClick={showPop}
>
12 || distSq < dist2 || highlight)?'block':'none',
// backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: 1,//zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: !layerVisible.SatelliteImage?'#0008':'#fff'
}}>
{data?.NAME}
}
)
}
export default React.memo(AdcdMarker);
