fix: 优化esri-loader加载方式

packages/map/src/config/amap.js

-const url = 'https://webapi.amap.com/maps?v=1.4.15&key=e83f64300a2a55a33fa8e4ab9a46bca6';
+const url = window.location.protocol + '//webapi.amap.com/maps?';
+
+const key = 'e83f64300a2a55a33fa8e4ab9a46bca6';
+
+const v = '1.4.15';
 
 const plugins = ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.DistrictSearch'];
 
-const amapConfig = { url, plugins };
+const amapConfig = { url, plugins, key, v };
 
 export default amapConfig;

packages/map/src/config/module.js

-export default [
-  'gis/Map',
-  'gis/Basemap',
-  'gis/views/MapView',
-  'gis/views/SceneView',
-  'gis/layers/TileLayer',
-  'gis/layers/MapImageLayer',
-  'gis/layers/ElevationLayer',
-  'gis/Ground',
-  'gis/layers/SceneLayer',
-  'gis/layers/FeatureLayer',
-  'gis/layers/GroupLayer',
-  'gis/layers/VectorTileLayer',
-  'gis/layers/OpenStreetMapLayer',
-  'gis/geometry/Extent',
-  'gis/core/Collection',
-  'gis/Camera',
-  'gis/Viewpoint',
-  'gis/geometry/support/jsonUtils',
-  'gis/core/watchUtils',
-  'gis/Graphic',
-  'gis/symbols/PictureMarkerSymbol',
-  'gis/widgets/Popup',
-  'gis/layers/GraphicsLayer',
-  'dojox/gfx/matrix',
-  'gis/Color',
-  'gis/symbols/SimpleFillSymbol',
-  'gis/symbols/SimpleLineSymbol',
-  'gis/symbols/TextSymbol',
-  'gis/geometry/Point',
-  'dojo/_base/lang',
-  'gis/core/promiseUtils',
-  'gis/core/urlUtils',
-];

packages/map/src/core/loadMapModules.js

+import gisConfig from '../config/gis';
+import esriLoader from 'esri-loader';
+const loadedModules = {}; //已经加载的模块
+
+const loadMapModules = async (modules) => {
+  let needLoadModules = isNeedRequest(modules);
+  if (Object.keys(needLoadModules).length > 0) {
+    let moduleArr = Object.entries(needLoadModules);
+    let moduleUrlsArray = moduleArr.map((item) => item[1]);
+    let requestloadedModules = await esriLoader.loadModules(moduleUrlsArray, gisConfig);
+    requestloadedModules.map((item, index) => {
+      loadedModules[moduleArr[index][0]] = item;
+    });
+  }
+  return loadedModules;
+};
+
+const isNeedRequest = (modules) => {
+  let needLoadModules = {};
+  for (let key in modules) {
+    if (!loadedModules[key]) needLoadModules[key] = modules[key];
+  }
+  return needLoadModules;
+};
+
+const getMapModules = () => {
+  return loadedModules;
+};
+
+export { getMapModules, loadMapModules };

packages/map/src/core/loadScripts.js

+function loadScripts(srcs) {
+  return new Promise((resolve, reject) => {
+    if (srcs && srcs.length > 0) {
+      var scriptOrLink;
+      var _src = srcs.shift();
+      if (_src) {
+        var isCSS = _src.lastIndexOf('.css') == _src.length - 4;
+        if (isCSS) {
+          scriptOrLink = document.createElement('link');
+          scriptOrLink.type = 'text/css';
+          scriptOrLink.rel = 'stylesheet';
+          scriptOrLink.href = _src;
+        } else {
+          scriptOrLink = document.createElement('script');
+          scriptOrLink.type = 'text/javascript';
+          scriptOrLink.charset = 'utf-8';
+          scriptOrLink.src = _src;
+        }
+        if (scriptOrLink) {
+          scriptOrLink.onload = function () {
+            if (srcs.length > 0) {
+              loadScripts(srcs).then(resolve, reject);
+            } else {
+              resolve();
+            }
+          };
+          scriptOrLink.onerror = reject;
+          document.getElementsByTagName('head')[0].appendChild(scriptOrLink);
+        }
+      }
+    }
+  });
+}
+
+export default loadScripts;

packages/map/src/core/utils.js

+import { loadMapModules, getMapModules } from './loadMapModules';
+const _ = require('lodash');
+const querystring = require('querystring');
+const modules = {
+  jsonUtils: 'gis/geometry/support/jsonUtils',
+};
+
+const layerOperation = {
+  isInGroup(lyr, reorderGroups = []) {
+    let { lyrIndex, groupIndex } = this.getGroup(lyr, reorderGroups);
+    return _.isNumber(lyrIndex) && groupIndex >= 0;
+  },
+  getLayerWeight(lyr, reorderGroups) {
+    if ('graphics' == lyr.type) {
+      let { lyrIndex, groupIndex } = this.getGroup(lyr, reorderGroups);
+      if (this.isInGroup(lyr, reorderGroups)) return (groupIndex + 1) * 100 + lyrIndex;
+    } else {
+      return -1;
+    }
+  },
+  registerReorderStrategy: (groupName, reorderGroups = []) => {
+    var index = reorderGroups.indexOf(groupName);
+    return index < 0 && reorderGroups.push(groupName);
+  },
+  getGroup(lyr, reorderGroups) {
+    let groupName = lyr.order.split('-')[0],
+      lyrIndex = Number(lyr.order.split('-')[1]),
+      groupIndex = reorderGroups.indexOf(groupName);
+    return { lyrIndex, groupIndex };
+  },
+};
+
+const urlUtils = {
+  urlToObject: (url) => {
+    let [path, params] = url.split('?');
+    let query = querystring.parse(params);
+    return { path, query };
+  },
+  objectToUrl: (url, query) => {},
+};
+
+const geomUtils = {
+  toGeometry(jsonObj, view) {
+    const { jsonUtils } = getMapModules();
+    if (jsonObj) {
+      jsonObj.spatialReference = {
+        wkid: view.spatialReference.wkid,
+      };
+      return jsonUtils.fromJSON(jsonObj);
+    }
+  },
+};
+
+const loadUtilMapModules = async () => {
+  await loadMapModules(modules);
+};
+
+const mapUtils = {
+  getNearestScale(extent, view) {
+    let resolution = extent.width / view.width,
+      zoom = 0,
+      nearestScale = -1,
+      diff = Number.POSITIVE_INFINITY;
+    if (view.map.basemap && view.map.basemap.baseLayers.length > 0) {
+      view.map.basemap.baseLayers.getItemAt(0).tileInfo.lods.forEach(
+        function (item) {
+          if (item.resolution >= resolution) {
+            var difftemp = item.resolution - resolution;
+            if (difftemp < diff) {
+              diff = difftemp;
+              nearestScale = item.scale;
+              zoom = item.level;
+            }
+          }
+        }.bind(this),
+      );
+    }
+    return { scale: nearestScale, zoom };
+  },
+};
+
+export { layerOperation, urlUtils, loadUtilMapModules, geomUtils, mapUtils };

packages/map/src/core/withModule.jsx

+/************************************************************************************************
+ * Copyright ©, 2018-2020, MapGIS
+ * @Description: 地图模块加载器
+ * @Author: Chenzilong
+ * @History: 1、初始版本 2018-11-19 Chenzilong
+ * @Usage:  高阶组件的实用  => 通过封装一个高阶组件，先加载地图相对应的模块，加载完成，再来加载地图资源，这样在封装的组件里面就不会有异步过程，并且还使用了全局变量来进行组件缓存组件
+ *
+ * //加载模块
+ * const modules = { Graphic:"esri/Graphic",GraphicsLayer:"esri/layers/GraphicsLayer" }; //需要加载的地图模块定义
+ * 1、class修饰符方式
+ * @withModule(modules) //使用修饰符修饰组件
+ * class SomeComponent extends React.Component{}
+ * 2、函数调用方式
+ * const WrappedComponent = withModule(modules)(SomeComponent)
+ * //使用组件
+ * <WrappedComponent wrappedComponentRef={ref=>this.ref = ref}/>  //获取组件实例引用使用wrappedComponentRef
+ * //获取模块
+ * 组件内部通过 const {module:{Graphic,GraphicsLayer}} = this.props 获取被加载模块
+ *
+ * withModule会在加载完所有模块后显示组件，并将模块通过props.module注入到组件中
+ ************************************************************************************************/
+
+import React from 'react';
+import { loadMapModules, getMapModules } from './loadMapModules';
+
+const withModule = (modules) => {
+  return function wrapper(Component) {
+    class Proxy extends React.Component {
+      state = {
+        loaded: false,
+      };
+
+      unmounted = false;
+
+      componentDidMount() {
+        if (modules) {
+          this.loadModules();
+        } else {
+          this.setState({ loaded: true });
+        }
+      }
+
+      componentWillUnmount() {
+        this.unmounted = true;
+      }
+
+      async loadModules() {
+        await loadMapModules(modules);
+        if (!this.unmounted) this.setState({ loaded: true });
+      }
+
+      render() {
+        const { wrappedComponentRef, ...rest } = this.props;
+        return this.state.loaded ? (
+          <Component modules={getMapModules()} {...rest} ref={wrappedComponentRef} />
+        ) : null;
+      }
+    }
+    return Proxy;
+  };
+};
+
+export default withModule;

packages/map/src/demos/createMap.jsx

 import mapsettings from '../mapData';
-import MapManganer from '../index';
+import MapView from '../index';
 
 export default class CreateMap extends React.Component {
   constructor(props) {
@@ -8,17 +8,44 @@ export default class CreateMap extends React.Component {
     if (!window._config) {
       window._config = {
         site: '',
-        mapsettings: mapsettings,
         useCoverMap: true,
       };
     }
   }
 
+  state = {
+    loaded: false,
+    mapsettings: null,
+  };
+
   componentDidMount() {
-    window.mapManager = this.mapManganerRef.current;
+    let url = location.origin + '/CityInterface/rest/services.svc/GetWebSiteConfig?client=city';
+    fetch(url)
+      .then((data) => data.json())
+      .then((response) => {
+        let data = response[0]['mapsettings'];
+        this.setState({
+          mapsettings: data,
+          loaded: true,
+        });
+      })
+      .catch(() => {
+        new Error('请求资源失败');
+      });
   }
 
   render() {
-    return <MapManganer mapsettings={mapsettings} ref={this.mapManganerRef} />;
+    const { loaded, mapsettings } = this.state;
+    return (
+      <>
+        {loaded ? (
+          <MapView mapsettings={mapsettings} ref={this.mapManganerRef} />
+        ) : (
+          <div>
+            <h1>加载中.....</h1>
+          </div>
+        )}
+      </>
+    );
   }
 }

packages/map/src/extensions/PromiseRegistry.js

-// All material copyright GIS, All Rights Reserved, unless otherwise specified.
-// See https://js.gis.com/4.3/gis/copyright.txt for details.
-//>>built
-define('require exports gis/core/tsSupport/declareExtendsHelper gis/core/tsSupport/decorateHelper gis/core/Accessor gis/core/accessorSupport/decorators'.split(
-  ' ',
-), function (c, k, g, f, h, e) {
-  c = (function (c) {
-    function b() {
-      var a = c.call(this) || this;
-      a._groups = null;
-      a._groups = {};
-      return a;
-    }
-    g(b, c);
-    b.prototype.destroy = function () {
-      this.removeAll();
-      this._groups = null;
-    };
-    Object.defineProperty(b.prototype, 'size', {
-      get: function () {
-        var a = 0,
-          d = this._groups,
-          b;
-        for (b in d) a += d[b].length;
-        return a;
-      },
-      enumerable: !0,
-      configurable: !0,
-    });
-    b.prototype.add = function (a, b) {
-      if (!this._isPromise(a) && !Array.isArray(a)) return this;
-      b = this._getOrCreateGroup(b);
-      if (Array.isArray(a)) for (var d = 0; d < a.length; d++) b.push(a[d]);
-      else b.push(a);
-      this.notifyChange('size');
-      return this;
-    };
-    b.prototype.has = function (a) {
-      a = this._groups[a];
-      return !!a && 0 < a.length;
-    };
-    b.prototype.remove = function (a) {
-      if (Array.isArray(a)) a.forEach(this.remove.bind(this));
-      else {
-        a = this._getGroup(a);
-        if (!a) return this;
-        for (var b = 0; b < a.length; b++)
-          !a[b].isFulfilled() && !a[b].isCanceled() && a[b].cancel();
-        a.length = 0;
-        this.notifyChange('size');
-      }
-      return this;
-    };
-    b.prototype.removeAll = function () {
-      var a = this._groups,
-        b;
-      for (b in a) this.remove(b), delete a[b];
-      return this;
-    };
-    b.prototype._isPromise = function (a) {
-      return a && !!a.cancel && !!a.isCanceled;
-    };
-    b.prototype._getOrCreateGroup = function (a) {
-      return this._getGroup(a) || (this._groups[this._ensureGroupName(a)] = []);
-    };
-    b.prototype._getGroup = function (a) {
-      return this._groups[this._ensureGroupName(a)];
-    };
-    b.prototype._ensureGroupName = function (a) {
-      return a || '_default_';
-    };
-    return b;
-  })(e.declared(h));
-  f([e.property({ readOnly: !0 })], c.prototype, 'size', null);
-  return (c = f([e.subclass()], c));
-});

packages/map/src/extensions/layers/AMapTileLayer.js

 import TilemetaUtils from './support/TilemetaUtils';
-console.log('Amap-tilelayer');
-export default function (TileLayer, lang, promiseUtils) {
+import { getMapModules } from '../../core/loadMapModules';
+
+export default function ({ TileLayer, lang, promiseUtils } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 99, //地图缩放级数
     maxlevel = 18, //地图总级数

packages/map/src/extensions/layers/BaiduTileLayer.js

 import TilemetaUtils from './support/TilemetaUtils';
-
+import { getMapModules } from '../../core/loadMapModules';
 //百度地图
-export default function (TileLayer, promiseUtils) {
+export default function ({ TileLayer, promiseUtils } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 99, //地图缩放级数
     maxlevel = 20, //地图总级数

packages/map/src/extensions/layers/GoogleTileLayer.js

 // 谷歌地图 (由TileLayer扩展)
 // create by czl 2017/12/2
 import TilemetaUtils from './support/TilemetaUtils';
+import { getMapModules } from '../../core/loadMapModules';
 
-export default function (TileLayer, lang, promiseUtils) {
+export default function ({ TileLayer, lang, promiseUtils } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 99, //地图缩放级数
     levelStart = 3, // 起始级数

packages/map/src/extensions/layers/MapBoxLayer.js

-// All material copyright GIS, All Rights Reserved, unless otherwise specified.
-// See https://js.gis.com/4.3/gis/copyright.txt for details.
-//>>built
-//streets、light、dark、satellite、streets-satellite、wheatpaste、streets-basic、comic、outdoors、run-bike-hike、pencil、pirates、emerald、high-contrast
-define(['gis/config', 'gis/layers/WebTileLayer'], function (a, b) {
+import { getMapModules } from '../../core/loadMapModules';
+
+export default function ({ config, WebTileLayer } = getMapModules()) {
+  let a = config,
+    b = WebTileLayer;
   a.request.corsEnabledServers.push('a.tile.mapbox.org', 'b.tile.mapbox.org', 'c.tile.mapbox.org');
   return b.createSubclass({
     declaredClass: 'gis.layers.MapBoxLayer',
@@ -15,4 +15,4 @@ define(['gis/config', 'gis/layers/WebTileLayer'], function (a, b) {
       type: { value: 'mapbox', json: { read: !1 } },
     },
   });
-});
+}

packages/map/src/extensions/layers/PipenetTileLayer.js

 // 自定义底图 (由TileLayer扩展)
 // create by zxc 2020/7/16
-define([
-  'gis/layers/TileLayer',
-  'dojo/_base/lang',
-  'gis/core/promiseUtils',
-  './support/TilemetaUtils',
-  'gis/request',
-], function (TileLayer, lang, promiseUtils, TilemetaUtils, request) {
+import TilemetaUtils from './support/TilemetaUtils';
+import { getMapModules } from '../../core/loadMapModules';
+
+export default function ({ TileLayer, lang, promiseUtils, request } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 99, //地图缩放级数
     levelStart = 0, // 起始级数
@@ -103,4 +100,4 @@ define([
         );
     },
   });
-});
+}

packages/map/src/extensions/layers/TiandituTileLayer.js

 // 天地图 (由TileLayer扩展)
 // create by czl 2017/12/2
-define([
-  'gis/layers/TileLayer',
-  'dojo/_base/lang',
-  'gis/core/promiseUtils',
-  './support/TilemetaUtils',
-], function (TileLayer, lang, promiseUtils, TilemetaUtils) {
+import TilemetaUtils from './support/TilemetaUtils';
+import { getMapModules } from '../../core/loadMapModules';
+
+export default function ({ TileLayer, lang, promiseUtils } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 20, //地图总级数
     levelStart = 3, // 起始级数
@@ -165,4 +163,4 @@ define([
       });
     },
   });
-});
+}

packages/map/src/extensions/layers/UserTileLayer.js

 // 自定义底图 (由TileLayer扩展)
 // create by ysq 2019/5/8
-define([
-  'gis/layers/TileLayer',
-  'dojo/_base/lang',
-  'gis/core/promiseUtils',
-  './support/TilemetaUtils',
-  'gis/request',
-], function (TileLayer, lang, promiseUtils, TilemetaUtils, request) {
+import TilemetaUtils from './support/TilemetaUtils';
+import { getMapModules } from '../../core/loadMapModules';
+
+export default function ({ TileLayer, lang, promiseUtils } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 99, //地图缩放级数
     levelStart = 0, // 起始级数
@@ -97,4 +94,4 @@ define([
       });
     },
   });
-});
+}

packages/map/src/extensions/layers/WMTSTileLayer.js

 // create by ysq 2018/11/7
-define([
-  'gis/layers/TileLayer',
-  'dojo/_base/lang',
-  'gis/core/promiseUtils',
-  './support/TilemetaUtils',
-], function (TileLayer, lang, promiseUtils, TilemetaUtils) {
+import TilemetaUtils from './support/TilemetaUtils';
+import { getMapModules } from '../../core/loadMapModules';
+
+export default function ({ TileLayer, lang, promiseUtils } = getMapModules()) {
   var dpi = 96, //pixel per inch
     level = 19, //地图总级数
     levelStart = 9, // 起始级数
@@ -51,12 +49,4 @@ define([
       });
     },
   });
-});
-
-import gisConfig from '../../config/gis';
-const modules = [
-  'gis/layers/TileLayer',
-  'dojo/_base/lang',
-  'gis/core/promiseUtils',
-  './support/TilemetaUtils',
-];
+}

packages/map/src/extensions/layers/index.js

+import { loadMapModules } from '../../core/loadMapModules';
+import AMapTileLayer from './AMapTileLayer';
+import BaiduTileLayer from './BaiduTileLayer';
+import GoogleTileLayer from './GoogleTileLayer';
+import MapBoxLayer from './MapBoxLayer';
+import PipenetTileLayer from './PipenetTileLayer';
+import TiandituTileLayer from './TiandituTileLayer';
+import UserTileLayer from './UserTileLayer';
+import WMTSTileLayer from './WMTSTileLayer';
+
+const modules = {
+  TileLayer: 'gis/layers/TileLayer',
+  lang: 'dojo/_base/lang',
+  promiseUtils: 'gis/core/promiseUtils',
+  config: 'gis/config',
+  WebTileLayer: 'gis/layers/WebTileLayer',
+  request: 'gis/request',
+};
+
+const loadMapLayerModules = async () => {
+  await loadMapModules(modules);
+};
+
+export {
+  loadMapLayerModules,
+  AMapTileLayer,
+  BaiduTileLayer,
+  GoogleTileLayer,
+  MapBoxLayer,
+  PipenetTileLayer,
+  TiandituTileLayer,
+  UserTileLayer,
+  WMTSTileLayer,
+};