diff --git a/src/views/Home/MapCtrl/Markers/AZDMarker.js b/src/views/Home/MapCtrl/Markers/AZDMarker.js index 1ab0923..d013fd7 100644 --- a/src/views/Home/MapCtrl/Markers/AZDMarker.js +++ b/src/views/Home/MapCtrl/Markers/AZDMarker.js @@ -14,7 +14,6 @@ function renderMarker({ rzWarning, rzState }, { width }) { -
` } diff --git a/src/views/Home/MapCtrl/Markers/HdswMarker2.js b/src/views/Home/MapCtrl/Markers/HdswMarker2.js new file mode 100644 index 0000000..8aea394 --- /dev/null +++ b/src/views/Home/MapCtrl/Markers/HdswMarker2.js @@ -0,0 +1,142 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { zindexmarker } from '../zindex'; +import { getHeightPx } from '../utils'; + +const { + css, + physics, +} = window.popmotionXL; + + +function renderMarker({ status }, { width, zoom }) { + let color1, color2; + + color1 = '#0f0'; + color2 = '#17abe3'; + if(status===0){ + return ` +
+ + + +
+ `; + }else if( status ===2 ){ + return ` +
+ + + +
+ `; + }else{ + return ` +
+ + + +
+ `; + } +} + + +function HdswMarker({ data, dispatch, setting, zoom }) { + const [ show, setShow ] = useState(true) + const [ status, setStatus ] = useState(0) + + useEffect(() => { + const width = 20; + + const placeholder = document.getElementById(`marker_hdsw_${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 }); + setStatus(data?.status||0) + }else{ + svgMarker = renderMarker(hdswDataItem[0], { width: width }); + setStatus(hdswDataItem[0]?.status||0) + } + } + placeholder.innerHTML = svgMarker; + + return () => { + placeholder.innerHTML = ''; + } + }, [setting]); + + const showPop = () => { + dispatch.runtime.setFeaturePop({ + id: data.id, + type: 'hdsw', + data, + lgtd: data.lgtd, + lttd: data.lttd, + elev: data.elev, + }) + } + + return ( + <> +
+
+
+ { + zoom > 14 && ( +
+ {data?.stnm} +
+ ) + } +
+
+
+ + + ) +} + +export default React.memo(HdswMarker); diff --git a/src/views/Home/MapCtrl/Markers/WYMarker.js b/src/views/Home/MapCtrl/Markers/WYMarker.js index ab79011..7e7cffb 100644 --- a/src/views/Home/MapCtrl/Markers/WYMarker.js +++ b/src/views/Home/MapCtrl/Markers/WYMarker.js @@ -42,7 +42,7 @@ function WYMarker({ data, dispatch, setting, zoom }) { const [ show, setShow ] = useState(true) useEffect(() => { - const width = 16; + const width = 12; const placeholder = document.getElementById(`marker_weiyi_${data.id}`); if (!placeholder) { diff --git a/src/views/Home/MapCtrl/index.less b/src/views/Home/MapCtrl/index.less index 84e2986..44c64fe 100644 --- a/src/views/Home/MapCtrl/index.less +++ b/src/views/Home/MapCtrl/index.less @@ -37,4 +37,29 @@ -0.8px 0.8px 0.3px white, -0.8px 0 0.3px white; } + + .markerBoxDp{ + position: absolute; + left: 0; + bottom: 0; + color: #fff; + + .markerLine{ + width: 2px; + // height: 100px; + transition: height 0.1s ease + } + .markerLabel{ + position: absolute; + white-space:nowrap; + top: 0; + left: 0; + padding: 2px 8px; + font-size: 14px; + border-radius: 4px; + background: #142947; + border: 1px solid #295cad; + } + } + } \ No newline at end of file diff --git a/src/views/Home/MapCtrl/utils.ts b/src/views/Home/MapCtrl/utils.ts index 711d9fa..2f1d0b3 100644 --- a/src/views/Home/MapCtrl/utils.ts +++ b/src/views/Home/MapCtrl/utils.ts @@ -38,3 +38,19 @@ export function getElev(val: string) { } } + +//配置不同Marker的elev +export function getHeightPx(zoom: number) { + const maxH = 170 + const minH = 0 + + + if(zoom>20){ + return maxH + }else if(zoom<=20 && zoom>14){ + return (zoom - 14) / (20 - 14) * (maxH - minH) + minH + }else{ + return minH + } +} +