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

import React, { useEffect } from 'react';
import { Table, Tabs,Modal,message,Tooltip } from 'antd';
import { zindexmarker } from '../zindex';

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


function renderMarker({ alarm, status }, { width, highlight }) {
  
  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="data:image/png;base64,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
  </div>
  `;
}

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


function TuRangMarker({ data, dispatch, setting, zoom, distSq }) {

  const highlight = setting;

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

  useEffect(() => {
    const width = 8;

    const placeholder = document.getElementById(`marker_turangshangqing_${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) {

      const el = placeholder.firstChild;
      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.turangshangqing + 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: 'turangshangqing',
      data,
      lgtd: data.lgtd,
      lttd: data.lttd,
      elev: data.elev,
    })
  }

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

  return (
    <>
    <Tooltip title={data.name}>
      <div
        id={`marker_turangshangqing_${data.id}`}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          transformOrigin: 'bottom center',
          transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
          lineHeight: 1,
          zIndex: zindexmarker.turangshangqing + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
        }}
        onClick={showPop}
      ></div>
    </Tooltip>
      {
        (zoom > 10 || distSq < dist2 || highlight) && (
          <div
            className="markerLabel2 markerLabelNew"
            style={{
              // backgroundColor: '#0008',
              padding: 4,
              borderRadius: 4,
              // fontSize: 10,
              lineHeight: 1,
              top: -10,
              left: 0,
              transform: 'translateX(-50%)',
              zIndex: zindexmarker.shuikuLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), 
              // color: '#0008',//!getLayerVisible.SatelliteImage?'#0008':'#fff'
            }}>
            {data.stnm}
          </div>
        )
      }
    </>
  )
}

export default React.memo(TuRangMarker);