index.js

import { PdRender, parseScheme } from '@wisdom-cesium/cesium';
import { useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '@/containers/App/store';
const cesiumMap = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const ref = useRef(null);
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const storeRef = useRef(null);
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    const mapConfig3d = props.globalConfig?.mapConfig3d;
    if (
      !(
        props.globalConfig.mapsettings?.areasettings &&
        // eslint-disable-next-line no-undef
        globalConfig.mapsettings?.basemaps?.length > 0
      )
    )
      return;
    if (storeRef.current) return;
    const { widgets } = mapConfig3d;
    const schemes = parseScheme.parseSchemes(mapConfig3d);
    const schemeData = parseScheme.parseDatas(schemes);
    const pdView = new PdRender({
      el: ref.current,
      widgets,
      ...schemeData,
    });
    storeRef.current = pdView;
    props.updatePdCesiumView(pdView);
  }, [props]);

  return (
    // eslint-disable-next-line react/react-in-jsx-scope
    <div
      style={{
        inset: 0,
        position: 'absolute',
      }}
      ref={ref}
    />
  );
};

const mapStateToProps = state => ({
  globalConfig: state.getIn(['global', 'globalConfig']),
});

const mapDispatchToProps = dispatch => ({
  updatePdCesiumView(pdView) {
    dispatch(actionCreators.updatePdCesiumView(pdView));
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(cesiumMap);