feat: 接入新版本地图

config/config.js

@@ -30,7 +30,7 @@ module.exports = {
   ignoreMomentLocale: true,
   nodeModulesTransform: {
     type: 'none',
-    exclude: [],
+    exclude: [''],
   },
   proxy: proxy[REACT_APP_ENV || 'dev'],
   // openAPI: {

config/micor.js

@@ -15,6 +15,12 @@ export default {
       container: '#micro-container',
       activeRule: '/civbase/civ_water',
     },
+    {
+      name: 'civ_webgis',
+      entry: `//${window.location.hostname}:8081/civ_webgis`,
+      container: '#micro-container',
+      activeRule: '/civbase/civ_webgis',
+    },
     {
       name: 'civweb4',
       entry: `//${window.location.hostname}:3020/civweb4`,
@@ -27,7 +33,6 @@ export default {
       container: '#micro-container',
       activeRule: '/civbase/middleground',
     },
-
   ],
   prod: [
     {

config/proxy.js

 /* eslint-disable */
 // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
-const proxyURL = 'http://192.168.10.150:8669';
+const proxyURL = 'http://192.168.12.69:8082';
 module.exports = {
   assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './',
   dev: {

internals/webpack/webpack.dev.babel.js

@@ -9,7 +9,6 @@ module.exports = require('./webpack.base.babel')({
 
   // Add hot reloading in development
   entry: [
-    require.resolve('react-app-polyfill/ie11'),
     'webpack-hot-middleware/client?reload=true',
     path.join(process.cwd(), 'src/app.js'), // Start with js/app.js
   ],
@@ -17,29 +16,34 @@ module.exports = require('./webpack.base.babel')({
     namedModules: true,
     namedChunks: true,
     runtimeChunk: {
-      name: "runtime",
+      name: 'runtime',
     },
     splitChunks: {
       name: false,
-      chunks: "all", // all(全部)， async(异步的模块)，initial(同步的模块)
+      // eslint-disable-next-line no-irregular-whitespace
+      chunks: 'all', // all(全部)， async(异步的模块)，initial(同步的模块)
+      // eslint-disable-next-line no-irregular-whitespace
       minSize: 20000, // 表示文件大于1k的时候才对它进行打包
+      // eslint-disable-next-line no-irregular-whitespace
       minChunks: 2, // 当某个模块满足minChunks引用次数时，才会被打包。
+      // eslint-disable-next-line no-irregular-whitespace
       maxAsyncRequests: 5, // 在打包某个模块的时候，最多分成5个chunk，多余的会合到最后一个chunk中
       maxInitialRequests: Infinity,
-      automaticNameDelimiter: "~", // 当vendors或者default中的filename不填时，打包出来的文件名就会带~
+      automaticNameDelimiter: '~', // 当vendors或者default中的filename不填时，打包出来的文件名就会带~
       cacheGroups: {
         default: false,
         vendors: {
+          // eslint-disable-next-line no-irregular-whitespace
           // 将从node_modules中引入的模块统一打包到common.js文件中
-          name: "common",
-          chunks: "all",
+          name: 'common',
+          chunks: 'all',
           minChunks: 2,
           test: /[\\/]node_modules[\\/]/,
         },
         styles: {
           // css统一打包到common.css文件中
-          name: "common",
-          chunks: "all",
+          name: 'common',
+          chunks: 'all',
           minChunks: 2,
           test: /\.(css|less|scss|stylus)$/,
           enforce: true,
@@ -54,7 +58,7 @@ module.exports = require('./webpack.base.babel')({
       include: /src/,
       failOnError: false,
       allowAsyncCycles: false,
-      cwd: process.cwd()
+      cwd: process.cwd(),
     }),
   ],
   devtool: 'cheap-module-source-map',

package.json

@@ -90,15 +90,19 @@
         "babel-core": "7.0.0-bridge.0"
     },
     "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@ant-design/colors": "^5.0.1",
         "@ant-design/icons": "^4.0.0",
         "@ant-design/pro-layout": "^6.24.1",
         "@ant-design/pro-skeleton": "^1.0.0-beta.2",
         "@ant-design/pro-table": "^2.5.3",
         "@ant-design/pro-utils": "^1.10.4",
+        "@arcgis/core": "^4.20.2",
         "@babel/polyfill": "7.4.3",
         "@babel/runtime": "^7.10.5",
         "@wisdom-components/empty": "^1.4.1",
+        "@wisdom-map/Amap": "^1.0.34-0",
+        "@wisdom-map/arcgismap": "^1.0.52",
         "@wisdom-utils/components": "0.0.14",
         "@wisdom-utils/runtime": "0.0.15",
         "@wisdom-utils/utils": "0.0.52",

src/components/mapView/ArcgisMap/index.js

+// eslint-disable-next-line import/extensions
+import arcgisConfig from '@arcgis/core/config';
+import React from 'react';
+// eslint-disable-next-line import/extensions
+import { ArcGISMap as MapComponent } from '@wisdom-map/arcgismap';
+// import MapComponent from './lib/index.js';
+// eslint-disable-next-line import/no-unresolved
+import pkg from '../../../../package.json';
+arcgisConfig.assetsPath = `${
+  window.location.origin
+}/${pkg.name.toLocaleLowerCase()}/assets`;
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class ArcGISMap extends React.Component {
+  destroyAMap() {
+    const mapKey = [
+      '_AMap_AMap.MapType',
+      '_AMap_labelcanvas',
+      '_AMap_imagelayer',
+      '_AMap_anole',
+      '_AMap_AMap.Scale',
+      '_AMap_rbush',
+      '_AMap_AMap.IndoorMap',
+      '_AMap_AMap.CustomLayer',
+      '_AMap_AMap.MarkerClusterer',
+      '_AMap_vectorlayer',
+      '_AMap_AMap.OverView',
+      '_AMap_sync',
+      '_AMap_AMap.PlaceSearch',
+      '_AMap_AMap.DistrictSearch',
+      '_AMap_Map3D',
+      '_AMap_AMap.Autocomplete',
+      '_AMap_AMap.Heatmap',
+      '_AMap_wgl',
+      '_AMap_overlay',
+      '_AMap_cvector',
+      '_AMap_AMap.ToolBar',
+      '_AMap_mouse',
+      '_AMap_AMap.RangingTool',
+      '_AMap_data.tileKeys'
+    ];
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < mapKey.length; i++) {
+      localStorage.removeItem(mapKey[i]);
+    }
+    delete window.AMap;
+    delete window.AMapUI;
+    delete window.AMapUI_DEBUG;
+  }
+  componentWillMount() {
+    this.destroyAMap()
+  }
+
+  render() {
+    // this.destroyAMap();
+    return (
+      <MapComponent {...this.props} assetsPath={arcgisConfig.assetsPath} />
+    );
+  }
+}

src/components/mapView/ArcgisMap/index.less

+@import '~antd/es/style/themes/default.less';
+
+.view {
+    position: absolute;
+    top:0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    .loadingBox{
+        position: absolute;
+        left: calc(50% - 40px);
+        top: calc(50% - 23px);
+        color: @text-color;
+    }
+    .mapBox {
+      width: 100%; 
+      height: 100%;
+    }
+
+}

src/components/mapView/GaoDeMap/index.js

+import React from 'react';
+import { AMapScene } from '@wisdom-map/Amap';
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class GaoDeMap extends React.Component {
+  render() {
+    return <AMapScene {...this.props} />;
+  }
+}

src/containers/App/store/actions.js

@@ -22,6 +22,7 @@ import {
   SELECT_MENU_KEY,
   SLIDER_MENU_MODE,
   VALIDATE_AUTH,
+  MAP_VIEW,
 } from './constants';
 
 export function getConfig(data) {
@@ -162,6 +163,13 @@ export function updateMicroMounted(data) {
   };
 }
 
+export function updageMapView(data) {
+  return {
+    type: MAP_VIEW,
+    data,
+  };
+}
+
 export function logout(data) {
   // eslint-disable-next-line no-undef
   createStoreage.remove('PANDA_STORE');

src/containers/App/store/constants.js

@@ -19,3 +19,4 @@ export const COMPLEX_CONFIG = 'App/COMPLEX_CONFIG';
 export const COMPLEX_PATHNAME = 'App/COMPLEX_PATHNAME';
 export const GET_MICRO_MOUNTED_STATUS = 'App/GET_MICRO_MOUNTED_STATUS';
 export const LOGINOUT = 'App/LOGINOUT';
+export const MAP_VIEW = 'App/MAP_VIEW';

src/containers/App/store/reducer.js

@@ -2,7 +2,7 @@ import { fromJS } from 'immutable';
 import Cookies from 'js-cookie';
 import AppConfig from 'kit_global_config';
 import { Storeage as Store } from 'kit_utils';
-
+import { store } from 'microser-data';
 import { Storage } from '@wisdom-utils/utils';
 
 import defaultSetting from '../../../../config/defaultSetting';
@@ -29,6 +29,7 @@ import {
   SELECT_MENU_KEY,
   SLIDER_MENU_MODE,
   VALIDATE_AUTH,
+  MAP_VIEW,
 } from './constants';
 
 const proxy = require('../../../../config/proxy');
@@ -68,6 +69,7 @@ export const initialState = fromJS({
   complexConfig: {},
   complexPathName: null,
   microMounted: true,
+  mapView: null
 });
 
 /* eslint-disable default-case, no-param-reassign */
@@ -203,6 +205,11 @@ const appReducer = (state = initialState, action) => {
         complexConfig: action.data.complexConfig,
         currentMenuIndex: action.data.currentMenuIndex,
       });
+    case MAP_VIEW:
+      store.set('view', action.data);
+      return state.merge({
+        mapView: action.data,
+      });
     default:
       return state;
   }

src/layouts/BasicLayout1.js

@@ -32,6 +32,7 @@ import { Router, Switch } from '@wisdom-utils/runtime';
 import RightContent from '@/components/GlobalHeader/ExtendRightContent';
 import Panel from '@/components/SliderPanel/MinPanel';
 import { actionCreators } from '@/containers/App/store';
+import CreateBaseMap from '@/pages/map/ArcgisMap';
 // import Authorized from '@/utils/Authorized';
 import {
   findPathByLeafId,
@@ -354,10 +355,13 @@ const BasicLayout = props => {
     if(routes) {
       if( routes && routes.routes) {
         const route = routes && routes.routes && routes.routes.find(item => item.path === decodeURI(window.location.pathname.replace('/civbase', '')));
+        if(route && route.path) {
           setTabActiveKey(route.path)
         }
 
       }
+
+    }
   }, [props.location]);
   // window.share.event.on('event:history', params => {
   //      setTimeout(() => {
@@ -635,40 +639,21 @@ const BasicLayout = props => {
                           </>
                       ))}
                      </Tabs>
-
-                  </div>
-
-                  {/* <div className='ant-pro-grid-content' style={{width: collapse ? 'calc(100% - 56px)':'calc(100% - 18px)'}}>
-                        <div className="ant-pro-grid-content-children">
-                              <div className={layoutStyles['ant-pro-page-container-children-content']}>
-
-                                    {
-                                      <div id="micro-container" className="subapp-container" style={{height: '90.4vh', position: 'relative', top: '59px'}}>
-                                        <Switch>
-                                          {props.routes &&  renderRoutes(props.routes, [])}
-                                        </Switch>
-
-                                      </div>
-                                    }
                   </div>
-                        </div>
-                    </div> */}
                     <PageContainer style={{paddingTop: '0px', height: '100%'}}>
                     {
                        renderRoutes(props.route.routes)
 
                     }
-                     <div id="micro-container" className="subapp-container">
+                      {
+                        !window.location.pathname.startsWith('/civbase/civweb') &&  <CreateBaseMap/>
+                      }
 
+                     <div id="micro-container" className="subapp-container">
+                       <CreateBaseMap/>
                        {props.children}
-
                      </div>
                     </PageContainer>
-
-                    {/* <PageContainer style={{paddingTop: '48px'}}>
-
-                    {props.children}
-                    </PageContainer> */}
                 </div>
           </div>
         </div>

src/micro.js

@@ -94,6 +94,7 @@ export const initMicroApps = (loader, store) => {
         },
     );
     const globalStore = store.getState().toJS();
+    console.log("globalStore", globalStore)
     const { setGlobalState } = initGlobalState({
         // eslint-disable-next-line no-undef
         globalConfig: createStoreage.get('globalConfig'),
@@ -115,8 +116,8 @@ export const initMicroApps = (loader, store) => {
         // getPublicPath: window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,
         excludeAssetFilter: url =>
             url.indexOf('framework/highcharts') !== -1 ||
-            url.indexOf('framework/amap/AMap.UI') !== -1 ||
-            url.indexOf('framework/amap/init.js') !== -1 ||
+            // url.indexOf('framework/amap/AMap.UI') !== -1 ||
+            // url.indexOf('framework/amap/init.js') !== -1 ||
             url.indexOf('configuration/js') !== -1 ||
             url.indexOf('framework/three.js') !== -1 ||
             url.indexOf('threedimensional/frameworkthree') !== -1 ||
@@ -125,11 +126,11 @@ export const initMicroApps = (loader, store) => {
             url.indexOf('framework/jquery/gridify.qrcode.js') !== -1 ||
             url.indexOf('framework/application/Platform.js') !== -1 ||
             url.indexOf('echarts') !== -1 ||
-            url.indexOf('lbs.amap.com') !== -1 ||
-            url.indexOf('restapi.amap.com') !== -1 ||
-            url.indexOf('webapi.amap.com') !== -1 ||
-            url.indexOf('webapi.amap.com/count') !== -1 ||
-            url.indexOf('restapi.amap.com/v3') !== -1 ||
+            // url.indexOf('lbs.amap.com') !== -1 ||
+            // url.indexOf('restapi.amap.com') !== -1 ||
+            // url.indexOf('webapi.amap.com') !== -1 ||
+            // url.indexOf('webapi.amap.com/count') !== -1 ||
+            // url.indexOf('restapi.amap.com/v3') !== -1 ||
             url.indexOf('api.map.baidu.com') !== -1 ||
             url.indexOf('map.baidu.com') !== -1 ||
             url.indexOf('pv.sohu.com') !== -1 ||
@@ -175,7 +176,7 @@ export const defaultApp = () => {
     const config = createStoreage.get('globalConfig');
     if (config && config.token) {
 
-        // const startWith = config.homepage ? config.homepage.split('/') : [];
+        const startWith = config.homepage ? config.homepage.split('/') : [];
         // console.log(findPathByLeafId(config.homepage,  '', 'url'))
         const basePath =
             config.homepage !== '' && FILTER_FOLER_REG.test(config.homepage) ?

src/pages/map/arcgisMap/index.js

+import React from 'react';
+import { connect } from 'react-redux';
+import { actionCreators } from '@/containers/App/store';
+import MapComponent from '@/components/mapView/ArcgisMap';
+import { store } from 'microser-data';
+import style from './index.less';
+
+class CreateMap extends React.Component {
+  constructor(props) {
+    super(props);
+    this.mapManganerRef = React.createRef();
+  }
+
+  state = {
+    loading: true,
+    config: window.globalConfig.mapsettings,
+    widgets: window.globalConfig.uiwidgets,
+  };
+
+  getView = view => {
+    this.props.updageMapView(view);
+
+  };
+
+  componentDidMount() {
+    debugger
+    this.mapManganerRef.current.props.getViewInfo(view => {
+      console.log(view);
+    })
+  }
+
+  render() {
+    return (
+      <>
+        <MapComponent {...this.state} getViewInfo={this.getView} ref={this.mapManganerRef}/>
+      </>
+    );
+  }
+}
+
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => ({
+  updageMapView(mapView) {
+    dispatch(actionCreators.updageMapView(mapView));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CreateMap);

src/pages/map/gaodeMap/index.js

+import React from 'react';
+import { connect } from 'react-redux';
+import { actionCreators } from '@/containers/App/store';
+import GaoDeMap from '@/components/mapView/GaoDeMap';
+
+class CreateMap extends React.Component {
+  constructor(props) {
+    super(props);
+    this.mapManganerRef = React.createRef();
+  }
+
+  state = {
+    loading: true,
+    options: window.globalConfig.mapsettings,
+    widgets: window.globalConfig.uiwidgets,
+  };
+
+  getView = view => {
+    console.log(view);
+  };
+
+  componentDidMount() {
+    console.log(this.mapManganerRef);
+  }
+
+  render() {
+    return (
+      <>
+        <GaoDeMap
+          {...this.state}
+          getMapInfo={this.getView}
+          ref={this.mapManganerRef}
+        />
+      </>
+    );
+  }
+}
+
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => ({
+  updageMapView(mapView) {
+    dispatch(actionCreators.updageMapView(mapView));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CreateMap);