tsg-web/src/views/Home/MapCtrl/Markers/RadarMarker.js

import React, {useEffect, useState} from 'react';
import { zindexmarker } from '../zindex';
import { Modal,Tabs } from "antd";

const {
  css,
  physics,
} = window.popmotionXL;


function renderMarker({ warnType, status }, { width, highlight }) {
  let color1 = '#11b7cd';

  /*return `
    <div style="cursor:pointer">
      <svg fill="${color2}" t="1668582218569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035" width="${width}" height="22">
        <path d="M810.666667 170.666667a128 128 0 0 1 128 128v426.666666a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128V298.666667a128 128 0 0 1 128-128h597.333334z m-347.008 359.594666a85.333333 85.333333 0 0 0-115.370667-0.384l-5.205333 5.205334-148.949334 161.28a42.666667 42.666667 0 0 0 26.368 71.338666l4.949334 0.298667H801.706667a42.666667 42.666667 0 0 0 32-70.826667l-97.194667-110.336a41.386667 41.386667 0 0 0-55.466667-0.768l-3.754666 3.754667-77.952 73.514667-2.005334 2.56-130.730666-132.778667-2.901334-2.858667zM704 341.333333a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" p-id="3036" fill="#1296db"></path>
      </svg>
    </div>
  `;*/

  return `
    <div style="cursor:pointer">
      <svg fill="${color1}" t="1668582218569" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035"
         width="${width}" height="33"
       >
        <path d="M0.19968 0h1023.968712v1023.968712H0.19968z" fill="transparent" p-id="4215"></path><path d="M235.484935 941.368569l-35.952679 36.009567a98.300996 98.300996 0 0 1-139.202858 0l-13.880465-13.709804a98.869868 98.869868 0 0 1 0-139.54418l35.95268-36.009567A519.49346 519.49346 0 0 1 152.145259 140.226826L491.249565 480.127552l100.235159-100.462708a84.875629 84.875629 0 1 1 51.539759 51.653532L542.732436 531.781084l339.218079 339.900726a516.421554 516.421554 0 0 1-646.46558 69.686759z m721.329071-576.323723A303.891159 303.891159 0 0 0 653.26417 60.869251V0a364.703523 364.703523 0 0 1 364.077764 365.044846z m-121.454067 0a182.323318 182.323318 0 0 0-182.038882-182.550867v-54.725439a237.048757 237.048757 0 0 1 236.764321 237.276306z" p-id="4216"></path>
       </svg>
    </div>
  `;
}

const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;


function RadarMarker({ data, dispatch, setting, zoom, distSq }) {
  const [visible, setVisible] = useState(false);

  const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
  const [iframeUrl, setIframeUrl] = useState("");

  const highlight = setting;

  let zindexOffset = 1;
  if (!data.status) {
    zindexOffset = 0;
  } else if (data.warnType) {
    zindexOffset = 2;
  }

  useEffect(() => {
    const width = 30;//12

    const placeholder = document.getElementById(`marker_radar_${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) {
      //console.log(placeholder);
      const el = placeholder.firstChild;
      //console.log(el);
      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.radar + 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]);

  const showPop = () => {
    /*dispatch.runtime.setFeaturePop({
      id: data.id,
      type: 'radar',
      data,
      lgtd: data.lgtd,
      lttd: data.lttd,
      elev: data.elev,
    })*/

    setVisible(true);
  };

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

  useEffect(() => {
    if(systemSwitchType){
      setIframeUrl("http://223.75.53.141:81/isc/index.html#/player?cameraIndexCode=c53571c976c34fd09f11ad1a61b5e4cd&token=111");
    }else{
      setIframeUrl("http://223.75.53.141:81/isc/index.html#/player?cameraIndexCode=0fda6a3d0df743b1ac35debe77155cb1&token=111");
    }

  }, [systemSwitchType]);

  return (
    <>
      <div
        id={`marker_radar_${data.id}`}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          transformOrigin: 'bottom center',
          transform: `translateX(-50%) ${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
          lineHeight: 1,
          zIndex: zindexmarker.radar + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
        }}
        onClick={showPop}
      ></div>
      {/*{
        (zoom > 12 || distSq < dist2 || highlight) && (
          <div
            className="markerLabel"
            style={{
              backgroundColor: '#0008',
              padding: 4,
              borderRadius: 4,
              fontSize: 10,
              lineHeight: 1,
              top: 0,
              left: 0,
              transform: 'translateX(-50%)',
              zIndex: zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
            }}>
            {data?.stnm}
          </div>
        )
      }*/}

      <Modal
        visible={visible}
        title="测雨雷达监控视频"
        footer={null}
        onCancel={()=>{setVisible(false)}}
        width="70vw"
        className="radarVideoModal"
        style={{top:"12vh", height:"82vh"}}
      >
        <Tabs defaultActiveKey={1}>
          <Tabs.TabPane tab="方舱监控" key="1">
            <iframe src={iframeUrl} style={{width: "100%", height:"100%"}}></iframe>
          </Tabs.TabPane>
        </Tabs>
      </Modal>
    </>
  )
}

export default React.memo(RadarMarker);