89 lines
2.0 KiB
JavaScript
89 lines
2.0 KiB
JavaScript
|
import React, { useEffect } from 'react';
|
||
|
|
import { zindexmarker } from '../zindex';
|
||
|
|
|
||
|
|
const {
|
||
|
|
css,
|
||
|
|
physics,
|
||
|
|
} = window.popmotionXL;
|
||
|
|
|
||
|
|
|
||
|
|
function renderMarker({ rzWarning, rzState }, { width }) {
|
||
|
|
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:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sdz.svg" alt="" className="panel-icon" />
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
function ShuiDianZhanMarker({ data, dispatch, setting, zoom }) {
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const width = 16;
|
||
|
|
|
||
|
|
const placeholder = document.getElementById(`marker_shuidianzhan_${data.id}`);
|
||
|
|
if (!placeholder) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const svgMarker = renderMarker(data, { width: width });
|
||
|
|
|
||
|
|
placeholder.innerHTML = svgMarker;
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
placeholder.innerHTML = '';
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const showPop = () => {
|
||
|
|
dispatch.runtime.setFeaturePop({
|
||
|
|
id: data.id,
|
||
|
|
type: 'shuidianzhan',
|
||
|
|
data,
|
||
|
|
lgtd: data.lgtd,
|
||
|
|
lttd: data.lttd,
|
||
|
|
elev: data.elev,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div
|
||
|
|
id={`marker_shuidianzhan_${data.id}`}
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
bottom: 0,
|
||
|
|
left: 0,
|
||
|
|
transformOrigin: 'bottom center',
|
||
|
|
transform: 'translateX(-50%) scale(1.5)',
|
||
|
|
lineHeight: 1,
|
||
|
|
zIndex: zindexmarker.drp,
|
||
|
|
cursor:"pointer"
|
||
|
|
}}
|
||
|
|
onClick={showPop}
|
||
|
|
></div>
|
||
|
|
{
|
||
|
|
zoom > 10 && (
|
||
|
|
<div
|
||
|
|
className="markerLabel2 markerLabelNew"
|
||
|
|
style={{
|
||
|
|
padding: 4,
|
||
|
|
borderRadius: 4,
|
||
|
|
fontSize: 10,
|
||
|
|
lineHeight: 1,
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
transform: 'translateX(-50%)',
|
||
|
|
zIndex: zindexmarker.drp,
|
||
|
|
}}>
|
||
|
|
{data.name}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(ShuiDianZhanMarker);
|