ss-dp/src/views/Home/MapCtrl/Markers/YHJMHMarker.js

import React, { useEffect } from 'react';
// import { zindexmarker } from '../zindex';
const zindexmarker = {
    z:36,
    hilightPlus:40,
    zLabel:56
}

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


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

  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/yanhejuminhu2.png"   alt="" className="panel-icon" />
  </div>
  `
}


function YHJMHMarker({ data, dispatch, setting, zoom }) {

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

    const placeholder = document.getElementById(`marker_yanhejuminhu_${data.id}`);
    if (!placeholder) {
      return;
    }

    const svgMarker = renderMarker(data, { width: width });

    placeholder.innerHTML = svgMarker;


    return () => {
      placeholder.innerHTML = '';
    }
  }, []);

  const showPop = () => {
    dispatch.runtime.setCameraTarget({
      center: [data.lgtd, data.lttd],
      zoom: 18,
      pitch: 60
    })
    dispatch.runtime.setFeaturePop({
      id: data.id,
      type: 'yanhejuminhu',
      data,
      lgtd: data.lgtd,
      lttd: data.lttd,
      elev: data.elev,
    })
  }

  return (
    <>
      <div
        id={`marker_yanhejuminhu_${data.id}`}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          transformOrigin: 'bottom center',
          transform: 'translateX(-50%) scale(1.5)',
          lineHeight: 1,
          zIndex: zindexmarker.z ,
          cursor:"pointer"
        }}
        onClick={showPop}
      ></div>
      {
        zoom > 18 && (
          <div
            className="markerLabel2 markerLabelNew"
            style={{
              padding: 4,
              borderRadius: 4,
              fontSize: 10,
              lineHeight: 1,
              minWidth:"50px",
              top: 0,
              left: 0,
              transform: 'translateX(-50%)',
              zIndex: zindexmarker.z
            }}>
            {data.name}
          </div>
        )
      }
    </>
  )
}

export default React.memo(YHJMHMarker);