128 lines
3.4 KiB
JavaScript
128 lines
3.4 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { zindexmarker } from '../zindex';
|
|
|
|
|
|
const {
|
|
css,
|
|
physics,
|
|
} = window.popmotionXL;
|
|
|
|
|
|
function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|
|
|
if(status===0){
|
|
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/sy2.png" alt="" className="panel-icon" />
|
|
</div>
|
|
`
|
|
}else if(status===2){
|
|
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:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" 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:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
function SYMarker({ data, dispatch, setting, zoom }) {
|
|
const [ show, setShow ] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const width = 16;
|
|
|
|
const placeholder = document.getElementById(`marker_shenya_${data.id}`);
|
|
if (!placeholder) {
|
|
return;
|
|
}
|
|
|
|
let svgMarker = ''
|
|
const hdswDataItem = setting?.filter(o=>o.stcd===data.stcd)//当前Marker对应的data
|
|
if( Array.isArray(setting) && Array.isArray(hdswDataItem) && hdswDataItem.length === 0){
|
|
//不显示
|
|
placeholder.innerHTML = '';
|
|
setShow(false)
|
|
return
|
|
}else{
|
|
setShow(true)
|
|
//显示
|
|
if(setting===null){
|
|
svgMarker = renderMarker(data, { width: width });
|
|
}else{
|
|
svgMarker = renderMarker(hdswDataItem[0], { width: width });
|
|
}
|
|
}
|
|
placeholder.innerHTML = svgMarker;
|
|
|
|
return () => {
|
|
placeholder.innerHTML = '';
|
|
}
|
|
}, [setting]);
|
|
|
|
const showPop = () => {
|
|
dispatch.runtime.setFeaturePop({
|
|
id: data.id,
|
|
type: 'shenya',
|
|
data,
|
|
lgtd: data.lgtd,
|
|
lttd: data.lttd,
|
|
elev: data.elev,
|
|
})
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
id={`marker_shenya_${data.id}`}
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
transformOrigin: 'bottom center',
|
|
transform: 'translateX(-50%) scale(1.5)',
|
|
lineHeight: 1,
|
|
zIndex: zindexmarker.sy,
|
|
cursor:"pointer"
|
|
}}
|
|
onClick={showPop}
|
|
></div>
|
|
{
|
|
zoom > 12 && (
|
|
<div
|
|
className="markerLabel2 markerLabelNew"
|
|
style={{
|
|
display: show?'block':'none',
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
fontSize: 10,
|
|
lineHeight: 1,
|
|
minWidth:"50px",
|
|
top: 0,
|
|
left: 0,
|
|
transform: 'translateX(-50%)',
|
|
zIndex: zindexmarker.wyLabel
|
|
}}>
|
|
{data.stationCode}
|
|
</div>
|
|
)
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default React.memo(SYMarker);
|