引入星图提供的地图资源、保存地图全局状态

环境说明:前期使用本地地图资源，等待环境更新后，将资源修改为线上资源

1.配置本地资源

1.1 运行星图提供的脚本，获取申请码

1.2 将本地资源放在src同级目录下的Public文件夹下

1.3 基于umi配置第三方资源

    export default (api, opts) => {
      // 引用第三方css
      api.addHTMLLinks(() => {
        return [
          {
            rel: 'stylesheet',
            type: 'text/css',
            href: './GV/thirdParty/CesiumManager/Widgets/widgets.css',
          }
        ];
      });
      // 引用第三方js
      api.addHTMLHeadScripts(() => {
        return [
          {
            type: 'text/javascript',
            src: './GV/thirdParty/thirdParty.js',
          },
          {
            type: 'text/javascript',
            src: './GV/GEOVIS.web.js',
          },
        ];
      });
    };

2.全局引入地图

2.1 获取外部资源

    const GV = window.GV;
    const Cesium = window.Cesium;
    const dePluginManager=window.dePluginManager;
    const cache={};
    export{GV,Cesium,dePluginManager,cache}

2.2 封装地图组件、保存全局地图状态

    import { GV, Cesium } from '../../Header';
    import React, { useEffect } from 'react';
    import styles from './index.less'
    import { useDispatch, useSelector, history } from 'umi';
    import { Button } from 'antd';

    const CommonMap = () => {
      const dispatch = useDispatch();
      const url = history.location.pathname.split('/')[1];
      const group = useSelector((state) => state.commomMap.Map);
      useEffect(() => {
        let viewer = new GV.GeoCanvas('GEOVISContainer');
        let groupView = new GV.GraphicGroup();
        viewer.graphicLayer.add(groupView);

        // 保存全局地图
        dispatch({
          type: 'commomMap/saveMap',
          payload: viewer,
        });

        // 保存整个地图上绘制的模型
        dispatch({
          type: 'commomMap/saveMapGroup',
          payload: groupView,
        });
      },[])
      useEffect(() => {

        // 监听地图上点击事件，保存当前点击模型的标识
        if(group) {
          group.screenSpaceEventHandler.setInputAction((movement) => {
            let pickObj = group.graphicLayer.pickByCoordinate2(movement.position.x, movement.position.y);
            if(pickObj.length != 0) {
              dispatch({
                type: 'commomMap/saveMapTag',
                payload: pickObj[0].id,
              });
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
      },[group])

      // 切换至3D
      const change3D = () => {
        if(group) {
          group.scene.morphTo3D(2);
        }
      };

      // 切换至2D
      const change2D = () => {
        if(group) {
          group.scene.morphTo2D(2);
        }
      };
      return (
        <div className={styles.mapBox}>
          <div id="GEOVISContainer" className={ url == 'location' ? styles.map : styles.planMap}></div>
          <div className={styles.changeButton}>
            <div className={styles.threeButton}>
              <Button onClick={change3D}>3D</Button>
            </div>
            <Button onClick={change2D}>2D</Button>
          </div>
        </div>
      );
    }

    export default CommonMap;

这里保存地图的全局状态是因为全局只引入地图一次，之后所绘制的模型都要展示在地图上，业务上需要对地图上的模型进行操作，比如显示和隐藏。这里参考的文档是星图提供的官方案例文档。