240 lines
14 KiB
JavaScript
240 lines
14 KiB
JavaScript
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 `
|
|
<div style="position:relative">
|
|
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
|
</svg>
|
|
<img width="${width}" style="position:absolute;top:0;left:2px" src="data:image/png;base64,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"
|
|
alt="" className="panel-icon" />
|
|
</div>
|
|
`;
|
|
}else if(level === 4){
|
|
return `
|
|
<div style="position:relative">
|
|
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
|
</svg>
|
|
<img width="16" style="position:absolute;top:0;left:2px" src="data:image/png;base64,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"
|
|
alt="" className="panel-icon" />
|
|
</div>
|
|
`;
|
|
}else{
|
|
return `
|
|
<div style="position:relative">
|
|
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
|
</svg>
|
|
<img width="${width-4}" style="position:absolute;top:0;left:2px" src="data:image/png;base64,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"
|
|
alt="" className="panel-icon" />
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
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) &&
|
|
<>
|
|
<div
|
|
id={`marker_tuxiang_${data.id}`}
|
|
style={{
|
|
display:(zoom > 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}
|
|
></div>
|
|
<div
|
|
className="markerLabel"
|
|
style={{
|
|
// backgroundColor: '#0008',
|
|
display:(zoom > 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}
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
{
|
|
data.level === 6 &&
|
|
<>
|
|
<div
|
|
id={`marker_tuxiang_${data.id}`}
|
|
style={{
|
|
display:(zoom > 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}
|
|
></div>
|
|
<div
|
|
className="markerLabel"
|
|
style={{
|
|
display:(zoom > 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}
|
|
</div>
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default React.memo(AdcdMarker);
|