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

import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';

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


function renderMarker({ state, warning }, { width, highlight }) {
  let color1="#1AFAEA";

  return `
    <div style="cursor:pointer;background:${color1};border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center">
      <svg t="1679535728455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4380" width="${width}" height="${width}">
        <path fill="#fff" d="M830.17 888.25A372.63 372.63 0 0 0 785 849.59c-45-30.41-59.49-28.89-95.71 10.73l-1.33 1.48a107.37 107.37 0 0 1-169.71 0.55c-43.46-46.72-43.87-47-88.24 0.46A113.05 113.05 0 0 1 344.77 903a123.35 123.35 0 0 1-95.3-53.36 45 45 0 0 0-63-15.57 99.21 99.21 0 0 0-37.79 25c-10 10.42-20 21-29.81 31.52-22.62-15-37.37-35.43-58.71-47.87v-3.92c11.43-11 23-21.89 34.33-33A176.65 176.65 0 0 1 182 757.57 112.94 112.94 0 0 1 302.33 795c37.41 45.62 51.1 43.5 85.75 0a109.5 109.5 0 0 1 172.85 1.11c34.28 43.36 49.76 41.47 82.94 0.5a111.36 111.36 0 0 1 125.2-37.73c3.73 1 7.46 1.75 12.25 2.9v-82.64H667.78V605h113.31V492.75H667.83V419h112.94V306.87H668.24v-74.24H781.6v-73.72h75.57a35.45 35.45 0 0 1 3 24.42c0 198.78 0.74 397.53-0.55 596.26a61.47 61.47 0 0 0 30 59v4z m-446.1-257.63a184.3 184.3 0 0 1-198.92-44.1 175.88 175.88 0 0 1-47.6-193.81A724.32 724.32 0 0 1 310 127.62a76.69 76.69 0 0 1 9.72-7.28 96.36 96.36 0 0 1 11.52 8.8 733.93 733.93 0 0 1 169.07 258 186.82 186.82 0 0 1-116.24 243.48z m0 0" p-id="4381"></path>
      </svg>
    </div>
  `;
}

/*function renderMarker({ state, warning }, { width, highlight }) {
  let color1="#1AFAEA";

  return `
    <div style="cursor:pointer;">
      <svg t="1680772074338" class="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22473" id="mx_n_1680772074338" width="${width}" height="${width}">
        <path d="M524.19047633 21.33333333l185.904762 975.238095H338.28571433z" fill="#1AFAEA" p-id="22474" data-spm-anchor-id="a313x.7781069.0.i3" class=""></path><path d="M524.28800033 268.40990433l120.393143 675.035429h-239.469715z" fill="#ffffff" p-id="22475" data-spm-anchor-id="a313x.7781069.0.i4" class="selected"></path>
      </svg>
    </div>
  `;
}*/

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


function XjHdswMarker({ 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 = 12;

    const placeholder = document.getElementById(`marker_jyhdsw_${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.hdsw + 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: 'hdsw',
      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 (
    <>
      <div
        id={`marker_jyhdsw_${data.id}`}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          transformOrigin: 'bottom center',
          transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
          lineHeight: 1,
          zIndex: zindexmarker.hdsw + 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.hdswLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
            }}>
            {data?.stnm}
          </div>
        )
      }
    </>
  )
}

export default React.memo(XjHdswMarker);