- 调整基座webgis子应用地图显示

src/layouts/BasicLayout.js

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { useHistory } from '@wisdom-utils/runtime';
 import KeepAlive from 'react-activation';
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { BasicLayout } from '@wisdom-utils/components/lib/AppLayout'
+import { BasicLayout } from '@wisdom-utils/components/lib/AppLayout';
 import RightContent from '@/components/GlobalHeader/ExtendRightContent';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import { actionCreators } from '@/containers/App/store';
@@ -24,30 +24,33 @@ const { params } = helpers;
 const { getParamsV1 } = params;
 const antIcon = <LoadingOutlined style={{ fontSize: 12 }} spin />;
 const arrowSvg = ({ fillColor = '#fff' }) => (
-  <svg t="1543324489942"
-    className="icon" viewBox="0 0 1024 1024"
-    version="1.1" xmlns="http://www.w3.org/2000/svg"
+  <svg
+    t="1543324489942"
+    className="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/1999/xlink"
-    width="16" height="16">
-    <path d="M511.700683 639.423111 191.917496 319.596945 319.830771 319.596945 511.700683 511.715521 703.570595 319.596945 831.48387 319.596945Z" p-id="8626" fill={fillColor}></path>
+    width="16"
+    height="16"
+  >
+    <path
+      d="M511.700683 639.423111 191.917496 319.596945 319.830771 319.596945 511.700683 511.715521 703.570595 319.596945 831.48387 319.596945Z"
+      p-id="8626"
+      fill={fillColor}
+    />
   </svg>
 );
 const ArrowIcon = props => <Icon component={arrowSvg} {...props} />;
-const optionsWith = [
-  { label: '按站点', value: 'site' },
-  { label: '按城市', value: 'city' },
-];
+const optionsWith = [{ label: '按站点', value: 'site' }, { label: '按城市', value: 'city' }];
 const HOT = ['HOT', '县', '市', 'New'];
 const StationsItem = (item, action, onChangeVisible) => {
   const changeGroup = (event, data) => {
-    debugger
+    debugger;
     action.changeGroup && action.changeGroup(event, data, onChangeVisible);
   };
   return (
-    <li
-      key={item.groupID}
-      style={{ marginRight: `${item.style.marginRight}px` }}
-    >
+    <li key={item.groupID} style={{ marginRight: `${item.style.marginRight}px` }}>
       <a
         className={classNames(layoutStyles.city_select, layoutStyles.showTip)}
         title={item.city}
@@ -56,9 +59,7 @@ const StationsItem = (item, action, onChangeVisible) => {
         onClick={event => changeGroup(event, item)}
       >
         {item.groupName}
-        {item.promoteTip && HOT.includes(item.promoteTip) && (
-          <div title={`${item.promoteTip}`}>{item.promoteTip}</div>
-        )}
+        {item.promoteTip && HOT.includes(item.promoteTip) && <div title={`${item.promoteTip}`}>{item.promoteTip}</div>}
       </a>
     </li>
   );
@@ -84,11 +85,7 @@ const Stations = props => {
   return (
     <>
       <div className={layoutStyles.focusStations}>
-        <ul>
-          {Array.isArray(data)
-            ? data.map(item => StationsItem(item, props.action, props.setVisible))
-            : null}
-        </ul>
+        <ul>{Array.isArray(data) ? data.map(item => StationsItem(item, props.action, props.setVisible)) : null}</ul>
       </div>
       <Radio.Group
         options={optionsWith}
@@ -101,10 +98,7 @@ const Stations = props => {
       />
       <div style={{ maxWidth: '520px', position: 'relative' }}>
         {defaultTab === 'site' ? (
-          <div
-            className={classNames(layoutStyles.city_pane, layoutStyles.station_container)}
-            ref={cityPane}
-          >
+          <div className={classNames(layoutStyles.city_pane, layoutStyles.station_container)} ref={cityPane}>
             <Anchor
               affix={false}
               onClick={handleClick}
@@ -112,25 +106,15 @@ const Stations = props => {
               getContainer={() => cityContent.current}
             >
               <ul className={layoutStyles.py}>
-                {props.data &&
-                  props.data.siteCityList &&
-                  props.data.siteCityList.letters}
+                {props.data && props.data.siteCityList && props.data.siteCityList.letters}
               </ul>
-              <div
-                className={layoutStyles.cityContent}
-                style={{ height: '335px' }}
-                ref={cityContent}
-              >
-                {props.data &&
-                  props.data.siteCityList &&
-                  props.data.siteCityList.content}
+              <div className={layoutStyles.cityContent} style={{ height: '335px' }} ref={cityContent}>
+                {props.data && props.data.siteCityList && props.data.siteCityList.content}
               </div>
             </Anchor>
           </div>
         ) : (
-          <div className="city_pane city_container">
-            {props.data.citySelector}
-          </div>
+          <div className="city_pane city_container">{props.data.citySelector}</div>
         )}
         <Spin spinning={props.loading} tip="加载中" />
       </div>
@@ -143,7 +127,7 @@ const renderSite = ({ data, config, loading, setLoading, action }) => {
   let loaded = !!((data && !data.stations) || (Array.isArray(data.weathers) && data.weathers.length === 0));
   if (config && config.userInfo && config.userInfo.site === '') {
     loaded = false;
-  };
+  }
   return (
     <>
       <Spin
@@ -152,38 +136,33 @@ const renderSite = ({ data, config, loading, setLoading, action }) => {
         size="small"
         style={{ marginLeft: '10px' }}
         tip=""
-        wrapperClassName={layoutStyles.spinLoadding}>
+        wrapperClassName={layoutStyles.spinLoadding}
+      >
         <>
           <Popover
             placement="bottomLeft"
             trigger="click"
             visible={visible}
             content={
-              <Stations
-                data={data}
-                loading={loading}
-                setLoading={setLoading}
-                setVisible={setVisible}
-                action={action}
-              />
+              <Stations data={data} loading={loading} setLoading={setLoading} setVisible={setVisible} action={action} />
             }
             arrowPointAtCenter
             overlayClassName={classNames(layoutStyles.stationsWrapper, layoutStyles.stationsTop)}
             onVisibleChange={visible => setVisible(visible)}
           >
-            {
-              Array.isArray(data.allStation) && data.allStation.length > 1 ? (
+            {Array.isArray(data.stations) ? (
               <div className={layoutStyles.toggleSite}>
                 <img src={require('../assets/basic/site.png')} className={layoutStyles.site} />
                 <span className={layoutStyles.name}>{data.currentStationName}</span>
-                  <ArrowIcon className={layoutStyles.arrow} fillColor="#fff"
+                <ArrowIcon
+                  className={layoutStyles.arrow}
+                  fillColor="#fff"
                   style={{
                     transform: !visible ? `rotate(0deg)` : `rotate(180deg)`,
                   }}
                 />
               </div>
-              ) : null
-            }
+            ) : null}
           </Popover>
         </>
       </Spin>
@@ -191,25 +170,23 @@ const renderSite = ({ data, config, loading, setLoading, action }) => {
         <span
           className={layoutStyles.weatcher}
           style={{
-            borderLeft:
-              data.stations.length === 0 ? '0px' : '1px solid rgba(256, 256, 256, 0.3)',
-          }}>
+            borderLeft: data.stations.length === 0 ? '0px' : '1px solid rgba(256, 256, 256, 0.3)',
+          }}
+        >
           <img src={data.weathers && data.weathers.icon} className={layoutStyles.icon} />
           <span className={layoutStyles.text}>{data.weathers && data.weathers.text}</span>
         </span>
       ) : null}
     </>
-  )
-}
+  );
+};
 
 const Layout = props => {
   const [collapse, setCollapse] = useState(false);
   const [cityData, setCityData] = useState({});
   const [siteLoading, setSiteLoading] = useState(false);
-  const [mapMode, setMapMode] = useState(WEB_GIS_TYPE.ARCGIS)
-  const [siteAction, setSiteAction] = useState(
-    () => new Site(props, setSiteLoading),
-  );
+  const [mapMode, setMapMode] = useState(WEB_GIS_TYPE.ARCGIS);
+  const [siteAction, setSiteAction] = useState(() => new Site(props, setSiteLoading));
   // const basename = getBaseName();
   const history = useHistory();
   useEffect(() => {
@@ -218,13 +195,14 @@ const Layout = props => {
       let client = props.global && props.global.hasOwnProperty('client') ? props.global.get('client') : null;
       client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
       let generateType = props.global && props.global.hasOwnProperty('get') ? props.global.get('generateType') : null;
-      generateType = !_.isNull(generateType) && !_.isUndefined(generateType) && generateType !== 'undefined' ? `&generateType=${generateType}` : '';
+      generateType =
+        !_.isNull(generateType) && !_.isUndefined(generateType) && generateType !== 'undefined'
+          ? `&generateType=${generateType}`
+          : '';
       history.replace(`/user/login?client=${client}${generateType}`);
       props.logout();
-      return;
     }
-    
-  }, [props.global]);
+  }, [history, props, props.global, siteAction]);
 
   useEffect(() => {
     if (
@@ -238,55 +216,49 @@ const Layout = props => {
         setCityData(res);
       });
     }
-  }, [props.global.userInfo])
+  }, [cityData, props.global, props.global.userInfo, siteAction]);
 
   const handlerPageChange = () => {
-
     const params = getParamsV1(props.location.pathname);
     if (params.hasOwnProperty('mapType') && params.mapType === WEB_GIS_TYPE.AMAP) {
       AMapLoader.reset();
-      setMapMode(WEB_GIS_TYPE.AMAP)
-    } else {
-      if (!/civweb4/.test(location.pathname)) {
+      setMapMode(WEB_GIS_TYPE.AMAP);
+    } else if (!/civweb4/.test(location.pathname)) {
       AMapLoader.reset();
-        setMapMode(WEB_GIS_TYPE.ARCGIS)
+      setMapMode(WEB_GIS_TYPE.ARCGIS);
     }
-    }
-  }
-
+  };
 
   useEffect(() => {
-    
     window.share.event.on('updateSite', res => {
-      debugger
-      setCityData(res)
+      debugger;
+      setCityData(res);
     });
     return () => {
       window.share.event.removeAllListeners('updateSite');
     };
   }, []);
 
-
   const handleUpdateCurrentIndex = index => {
     props.updateCurrentIndex(index);
     window.share && window.share.event.emit('trigger:updateMenuIndex', index);
     store.set('updateMenuIndex', index);
-  }
-
+  };
 
   const handlerIndustry = event => {
-    props.global.get('userInfo.site') &&
-    props.global.get('userInfo.Industries') &&
-    props.global.get('userInfo.Industries').length > 1
-      ? history.push(`/industry`)
-      : void 0;
+    props.global.get('userInfo.site') ? history.push(`/industry`) : void 0;
   };
 
   const handlerCollapsed = () => {
     setCollapse(!collapse);
-  }
+  };
 
-  const logo = props.global && _.isFunction(props.global.get) && props.global.get('bannerLogo') ? (props.global && _.isFunction(props.global.transformDevAssetsBaseURL) && props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))) : defaultSetting.logo;
+  const logo =
+    props.global && _.isFunction(props.global.get) && props.global.get('bannerLogo')
+      ? props.global &&
+        _.isFunction(props.global.transformDevAssetsBaseURL) &&
+        props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))
+      : defaultSetting.logo;
 
   return (
     <SecurityLayout loading {...props}>
@@ -309,20 +281,37 @@ const Layout = props => {
             loading: siteLoading,
             setLoading: setSiteLoading,
             action: siteAction,
-          })}>
+          })
+        }
+      >
         <>
           <Suspense fallback={<></>}>
-            {
-              window.location.pathname.startsWith('/civbase/civ_3d') ? <KeepAlive><CesiumMap /></KeepAlive> : window.location.pathname.startsWith('/civbase/civ_webgis') ? ((mapMode === 'AMap' ? <AMap /> : <ArcgisMap options={{ type: 'ArcgisMap' }} />)) : null
-            }
+            {/* {window.location.pathname.startsWith('/civbase/civ_3d') ? ( */}
+            {/*  <KeepAlive> */}
+            {/*    <CesiumMap /> */}
+            {/*  </KeepAlive> */}
+            {/* ) : window.location.pathname.startsWith('/civbase/civ_webgis') ? ( */}
+            {/*  mapMode === 'AMap' ? ( */}
+            {/*    <AMap /> */}
+            {/*  ) : ( */}
+            {/*    <ArcgisMap options={{ type: 'ArcgisMap' }} /> */}
+            {/*  ) */}
+            {/* ) : null} */}
+            {window.location.pathname.startsWith('/civbase/civ_3d') ? (
+              <KeepAlive>
+                <CesiumMap />
+              </KeepAlive>
+            ) : (
+              window.location.pathname.startsWith('/civbase/civ_webgis') && null
+            )}
           </Suspense>
           <div id="micro-container" className="subapp-container">
             {props.children}
           </div>
         </>
       </BasicLayout>
-
-    </SecurityLayout>);
+    </SecurityLayout>
+  );
 };
 
 const mapStateToProps = state => ({
@@ -373,7 +362,7 @@ const mapDispatchToProps = dispatch => ({
   },
   logout() {
     dispatch(actionCreators.logout());
-  }
+  },
 });
 export default connect(
   mapStateToProps,

src/pages/map/amap/index.js

@@ -3,6 +3,7 @@ import { AMapScene } from '@wisdom-map/Amap';
 import { connect } from 'react-redux';
 import { store } from '@wisdom-utils/utils';
 import { actionCreators } from '../../../containers/App/store';
+
 const AMap = props => {
   const getMap = (obj, current) => {
     store.set('amapView', {
@@ -14,10 +15,15 @@ const AMap = props => {
       map: current,
     });
   };
+
   const mapOptions = {
-    config: props.global.mapsettings,
+    config: window.globalConfig.mapsettings,
     theme: 'amap://styles/74fae00a851749793870b658f9f22d55',
+    mapOptions: {
+      plugins: ['AMap.MarkerClusterer'],
+    },
   };
+
   return (
     <div
       style={{
@@ -32,9 +38,9 @@ const AMap = props => {
     </div>
   );
 };
-
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
+  amapView: state.getIn(['global', 'amapView']),
 });
 
 const mapDispatchToProps = dispatch => ({