修改地图打点样式

src/views/Home/MapCtrl/Markers/AZDMarker.js

@@ -14,7 +14,6 @@ function renderMarker({ rzWarning, rzState }, { width }) {
     <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/anzhidian2.png" alt="" className="panel-icon" />
-    <div style="width:1px;height:50px;background:red;margin-left:9px"></div>
   </div>
   `
 }

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 `
+      <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/hdsw2.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/hdsw.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/hdsw.png" alt="" className="panel-icon" />
+      </div>
+    `; 
+  }
+}
+
+
+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 (
+    <>
+      <div 
+        className='markerBoxDp'
+        style={{
+          zIndex: zindexmarker.hdsw
+        }}
+      >
+        <div
+          id={`marker_hdsw_${data.id}`}
+          style={{
+            transformOrigin: 'bottom center',
+            transform: 'translate(-50%,0) scale(1.5)',
+            lineHeight: 1,
+            cursor:'pointer',
+            zIndex: zindexmarker.hdsw
+          }}
+          onClick={showPop}
+        >
+        </div>
+        {
+          zoom > 14 && (
+            <div 
+              className='markerLabel'
+              style={{
+                display: show?'block':'none',
+                transform: 'translate(20px,-7px)',
+              }}
+            >
+              {data?.stnm}
+            </div>
+          )
+        }
+        <div 
+          className='markerLine'
+          style={{
+            display: show?'block':'none',
+            transform: 'translate(-50%,0)',
+            background: `linear-gradient(to top, rgb(${status===0?'170, 168, 168':'1,2,3'}, 1), rgba(${status===0?'170, 168, 168':'1,2,3'}, 0.2))`,//#77c3f5
+            height:  `${getHeightPx(zoom)}px`
+          }}
+        >
+        </div>
+      </div>
+
+    </>
+  )
+}
+
+export default React.memo(HdswMarker);

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) {

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;
+        }
+    }
+
 }

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
+    }
+}
+