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

import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
import { useDispatch, useSelector } from 'react-redux';

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


function renderMarker({ rzWarning, rzState }, { width, highlight }) {

  let color1;
  color1 = '#1296db';


  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,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAABFNJREFUSEudlWtMm2UUx/+npS2lpaUt7aDQcVXGYG7TAjpnFrMtjm1uAy/RL2ZzGWEzfjBZXBgiIIZlRLNPbsyZ4UyMi4kwFGQRNSYOhwNv3AbJuIzScjEttLR0FOhj3teWlLY0zvdbcy6/55zz7zmECB9jTAXgMIBDADYD0PvcLQAGAHwNoJmIZtdLQ+EMjLFoAG8tMbzdZnHGtU0u4K+5RUw9WOHdE6KF2BonQWFiDAr18jkRoQ7ABSJ6EJwvBMAYSwJwo9XiMlb323B/YTlSkUiJiUJljhoH9LJuAEeIyBwYsAbAJfcy1lnTb0u+OOyImDjYeCpDgYoc9YSA6MlAyCrA15afq/usxkjJRQQssfBsDlKZq+EqecbfrkBAWavFVft610zY6ONpsXjzkTgkSqNgWljCh0Nz+GLcGeJ7NU/HtessEZ3jjDyAU4vHy0Z3/jChDNfzU5kKlGYoUd5jxYDDg6fio1GZo0FVnxWfB0G4mdzanWwXCyiNU5cfcLTZ7Gwo6f475EVcSwYKN+K1X6dx27rI2zViAXZvkOJsthrbvjOFxFwxanEoSX6MiD71AxpPds8UNZpdIc7JUiE69xjwYsck1BIhtBIh9iXE4NqYA9cKEpDZOob55bVDKU6S4ZJR10RExX7A4I7vTVnDrlBJigXA8P4UHOmYgtm9jB2aaAzNe5AqE+HCtng82jYe8qgMWRR+2WMYIqJNfoAjvWUs1rUSXh61W9TYrpKgpGsGJvcKsmJFaMjXodnswvnBuRCATEgYOZg6T0QKP8CZ2jImc68D4OZQtzUeLxnkcC57ERsl4Fv0Tp8N3jBvkgoJYwdTXUQk9wNG8ttNaeEUpBQJ+FZw8uUqOZ6uxNVRB8p6rKjYrMLFe3ZYPd41VXBKurPXMEpE6X7AV6XdM8VNQUPepZXislELlViI8l4r3shUQi+NwqR7GR/ds6MmVw37khev3J7CH3OeVUhRkgz1Rl0jEb3gB5Q2TTgvlf62VqbPJcTgs4INfGDtgA2lmUqoxULYPCu4PGxHWbaatx2+ZUGnT8Lc7/ontChKlp8kono/QLHkZab8dpPC4tuYnOP/AeijhVx7HCIBGYjIEbgqKr+1uKqOBawKrv8FaglOZ6lw9M40D9ykEPMyvTm5gBs7E3Hu7izapxfg9P0XGvJ02K+XVRFR9eqq8K0LMYCuil7rYx+PPNwm9Te/JF2Bmi2aHgB5RMQPJXhdG7wMHe/2WQ1XHhJyIl2B93I1JgHhaSJa3R/hDk4KgMZvzM7Hq/ptmHD/e8XW+7hVUpWjxvNJ8t8BFBPR/UDfSCfz9KKXnbk56ZJfH3fixxn3GsazOile3SjHvkSZUyKg8wA++E8nMzALY0wJ4GXuPn8yYs8u77Xx5vdz1TiRobzL3WEAXxKRfb0Kw1YQ7MwYUwD4qW5wdjtjwJls1Z8AdnEyjNi/4CFHcmaMaQG0+GIOEFHo8QiT4B9CpcwoDsGItwAAAABJRU5ErkJggg==" alt="" className="panel-icon" />
  </div>
  `
}

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


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

  const highlight = setting;
  const getLayerVisible = useSelector((s) => s.map.layerVisible)

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

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

    const placeholder = document.getElementById(`marker_gongshui_${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.gongshui + 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: 'gongshui',
      data,
      lgtd: data.lgtd,
      lttd: data.lttd,
      elev: data.elev,
    })
  }

  let markerZoom;
  if (highlight) {
    markerZoom = 2;
  } else if (zoom) {
    markerZoom = (zoom - 14) * 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_gongshui_${data.id}`}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          fontWeight:"bold",
          fontSize:16,
          transformOrigin: 'bottom center',
          transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
          lineHeight: 1,
          zIndex: zindexmarker.gongshui + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
          cursor:"pointer"
        }}
        onClick={showPop}
      ></div>
      {
        (zoom > 14 || distSq < dist1 || highlight) && (
          <div
            className="markerLabel2"
            style={{
              // backgroundColor: '#0008',
              width:"100px",
              fontSize: 12,
              fontWeight:"bold",
              lineHeight: 1,
              bottom: -14 * markerZoom,
              left: 0,
              top:25,
              transform: `translateX(-50%)`,
              zIndex: zindexmarker.gongshuiLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
              color: `rgba(0, 0, 0, 0.533)`,
              // textShadow: '2px 2px 4px #000000'
            }}>
            {data.v || '-'}
          </div>
        )
      }
      {
        (zoom > 10 || distSq < dist2 || highlight) && (
          <div
            className="markerLabel2"
            style={{
              // backgroundColor: '#0008',
              padding: "2px 0",
              borderRadius: 4,
              fontSize: 10,
              lineHeight: 1,
              top: 0,
              left: 0,
              transform: 'translateX(-50%)',
              zIndex: zindexmarker.gongshuiLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), 
              color: !getLayerVisible.SatelliteImage?'#0008':'#fff'
            }}>
            {data.name}
          </div>
        )
      }
    </>
  )
}

export default React.memo(GongShuiMarker);