feat: 引入高德地图

package.json

@@ -127,6 +127,7 @@
   ],
   "dependencies": {
     "cross-spawn": "^7.0.3",
-    "esri-loader": "^2.16.0"
+    "esri-loader": "^2.16.0",
+    "lodash": "^4.17.20"
   }
 }

packages/map/package.json

@@ -18,6 +18,7 @@
   "author": "zouxuchao",
   "license": "ISC",
   "dependencies": {
-    "esri-loader": "^2.16.0"
+    "esri-loader": "^2.16.0",
+    "lodash": "^4.17.20"
   }
 }

packages/map/src/config/amap.js

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

packages/map/src/config/gis.js

+const DEFAULT_WORKER_URL = 'https://panda-water.cn/web4/framework/4.9/';
+const gisConfig = {
+  baseURL: DEFAULT_WORKER_URL,
+  url: DEFAULT_WORKER_URL + 'init.js',
+  css: DEFAULT_WORKER_URL + 'gis/css/main.css',
+  dojoConfig: {
+    has: {
+      'gis-featurelayer-webgl': 1,
+    },
+    aliases: [
+      [
+        /^webgl-engine/,
+        function () {
+          return 'gis/views/3d/webgl-engine';
+        },
+      ],
+      [
+        /^engine/,
+        function () {
+          return 'gis/views/3d/webgl-engine';
+        },
+      ],
+      [
+        /^gis-hydra/,
+        function () {
+          return 'gis';
+        },
+      ],
+      ['text', 'dojo/text'],
+    ],
+    async: 1,
+    async: 1,
+    baseUrl: './',
+    packages: [
+      {
+        location: DEFAULT_WORKER_URL + 'dojo',
+        name: 'dojo',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'dijit',
+        name: 'dijit',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'dojox',
+        name: 'dojox',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'dgrid',
+        main: 'OnDemandGrid',
+        name: 'dgrid',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'dstore',
+        main: 'Store',
+        name: 'dstore',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'gis',
+        name: 'gis',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'moment',
+        main: 'moment',
+        name: 'moment',
+      },
+      {
+        location: DEFAULT_WORKER_URL + '@dojo',
+        name: '@dojo',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'cldrjs',
+        main: 'dist/cldr',
+        name: 'cldrjs',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'globalize',
+        main: 'dist/globalize',
+        name: 'globalize',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'maquette',
+        main: 'dist/maquette.umd',
+        name: 'maquette',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'maquette-css-transitions',
+        main: 'dist/maquette-css-transitions.umd',
+        name: 'maquette-css-transitions',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'maquette-jsx',
+        main: 'dist/maquette-jsx.umd',
+        name: 'maquette-jsx',
+      },
+      {
+        location: DEFAULT_WORKER_URL + 'tslib',
+        main: 'tslib',
+        name: 'tslib',
+      },
+    ],
+    hasCache: {
+      'config-deferredInstrumentation': 0,
+      'config-selectorEngine': 'acme',
+      'config-tlmSiblingOfDojo': 1,
+      'dojo-built': 1,
+      'dojo-has-api': 1,
+      'dojo-loader': 1,
+      'dojo-undef-api': 0,
+      dom: 1,
+      'host-browser': 1,
+      'gis-built': 1,
+      'gis-featurelayer-webgl': 0,
+      'gis-promise-compatibility': !1,
+      'gis-promise-compatibility-deprecation-warnings': !1,
+    },
+    map: {
+      globalize: {
+        cldr: 'cldrjs/dist/cldr',
+        'cldr/event': 'cldrjs/dist/cldr/event',
+        'cldr/supplemental': 'cldrjs/dist/cldr/supplemental',
+        'cldr/unresolved': 'cldrjs/dist/cldr/unresolved',
+      },
+    },
+  },
+};
+
+export default gisConfig;

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',
+];

packages/map/src/demos/createMap.jsx

-import { CreateMap } from '../index';
+import mapsettings from '../mapData';
+import MapManganer from '../index';
 
 export default () => {
-  return <CreateMap />;
+  return <MapManganer mapsettings={mapsettings} />;
 };

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';
+
+export default function (TileLayer, lang, promiseUtils) {
+  var dpi = 96, //pixel per inch
+    level = 99, //地图缩放级数
+    maxlevel = 18, //地图总级数
+    levelStart = 3, // 起始级数
+    resolution_0 = 156543.0339280234, //第0级分辨率 米/像素
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102113
+    fullExtent = [705289.3147226945, 206299.30564637203, 19490490.956488788, 8865103.18739793], //[-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892]
+    origin = { x: -20037508.3427892, y: 20037508.3427892 }, //裁图原点
+    server = {
+      //出图服务参数
+      count: 4, //服务总数
+      start: 1, //服务起始编号
+      seq: 0, //当前请求编号
+      //矢量
+      'amap-v':
+        window.location.protocol +
+        '//webrd0{num}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale={scale}&style=8&x={col}&y={row}&z={level}&type=map',
+      //影像
+      'amap-i':
+        window.location.protocol +
+        '//webst0{num}.is.autonavi.com/appmaptile?style=6&x={col}&y={row}&z={level}&type=map',
+      //影像注记
+      'amap-ia':
+        window.location.protocol +
+        '//webst0{num}.is.autonavi.com/appmaptile?x={col}&y={col}&z={level}&lang=zh_cn&size=1&scale={scale}&style=8&type=map',
+      //矢量x2
+      'amap-v2':
+        window.location.protocol +
+        '//webrd0{num}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale={scale}&style=8&x={col}&y={row}&z={level}&scl=2&type=map',
+      //影像x2
+      'amap-i2':
+        window.location.protocol +
+        '//webst0{num}.is.autonavi.com/appmaptile?style=6&x={col}&y={row}&z={level}&scl=2&type=map',
+      //影像注记x2
+      'amap-ia2':
+        window.location.protocol +
+        '//webst0{num}.is.autonavi.com/appmaptile?x={col}&y={col}&z={level}&lang=zh_cn&size=1&scale={scale}&style=8&type=map',
+    };
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.AMapTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，读取本地TileMetaData
+      return promiseUtils.resolve().then(
+        function () {
+          this.read(
+            TilemetaUtils.getTilemeta(
+              resolution_0,
+              dpi,
+              level,
+              levelStart,
+              wkid,
+              fullExtent,
+              origin,
+              tileSize,
+              format,
+            ),
+          );
+        }.bind(this),
+      );
+    },
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      server.seq++, (server.seq %= server.count);
+      return maxlevel < level
+        ? null
+        : lang.replace(server[this.layerType], {
+            num: server.seq + server.start,
+            row: row,
+            col: col,
+            level: level,
+            scale:
+              window.devicePixelRatio > 1
+                ? window.devicePixelRatio
+                : Math.ceil(window.devicePixelRatio),
+          });
+    },
+  });
+}

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

+import TilemetaUtils from './support/TilemetaUtils';
+
+//百度地图
+export default function (TileLayer, promiseUtils) {
+  var dpi = 96, //pixel per inch
+    level = 99, //地图缩放级数
+    maxlevel = 20, //地图总级数
+    levelStart = 5, // 起始级数
+    resolution_0 = 262144, //第0级分辨率 米/像素
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102100
+    fullExtent = [3471225.2442693943, 685702.9352539922, 19199896.701612312, 7935637.435122993], //[-33554432,-33554432,33554432,33554432]
+    origin = { x: -33554432, y: 33554432 }, //裁图原点
+    ak = 'E4805d16520de693a3fe707cdc962045',
+    defaultStyles =
+      't:all|e:all|l:13|s:-51,t:road|e:all|l:39|s:-60,t:all|e:l.i|l:22|s:-100|h:#000000',
+    server = {
+      //出图服务参数
+      count: 10, //服务总数
+      start: 0, //服务起始编号
+      seq: 0, //当前请求编号
+      //矢量
+      'baidu-v':
+        window.location.protocol +
+        '//api<%=num%>.map.bdimg.com/customimage/tile?x=<%=col%>&y=<%=row%>&z=<%=level%>&scale=<%=scale%>&ak=<%=ak%>&styles=<%=styles%>&type=map',
+      //影像
+      'baidu-i':
+        window.location.protocol +
+        '//shangetu<%=num%>.map.bdimg.com/it/u=x=<%=col%>;y=<%=row%>;z=<%=level%>;v=009;type=sate&fm=46&type=map',
+      //影像注记
+      'baidu-ia':
+        window.location.protocol +
+        '//online<%=num%>.map.bdimg.com/onlinelabel/?qt=tile&x=<%=col%>&y=<%=row%>&z=<%=level%>&styles=sl&type=map',
+    };
+
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.BaiduTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，读取本地TileMetaData
+      this.isVector() && (server.count = 3);
+      return promiseUtils.resolve().then(
+        function () {
+          this.read(
+            TilemetaUtils.getTilemeta(
+              resolution_0,
+              dpi,
+              level,
+              levelStart,
+              wkid,
+              fullExtent,
+              origin,
+              tileSize,
+              format,
+            ),
+          );
+        }.bind(this),
+      );
+    },
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      var tileCount = parseInt(Math.pow(2, level)),
+        col = col - tileCount / 2,
+        row = tileCount / 2 - row - 1;
+      server.seq++, (server.seq %= server.count);
+      return maxlevel < level
+        ? null
+        : _.template(this.getServerUrl())({
+            num: server.seq + server.start,
+            row: row,
+            col: col,
+            level: level,
+            scale: window.devicePixelRatio,
+            styles: encodeURIComponent(this.url || defaultStyles),
+            ak: ak,
+          });
+    },
+    isVector: function () {
+      return this.layerType == 'baidu-v';
+    },
+    getServerUrl: function () {
+      var serverUrl = server[this.layerType];
+      return serverUrl;
+    },
+  });
+}

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

+// 谷歌地图 (由TileLayer扩展)
+// create by czl 2017/12/2
+import TilemetaUtils from './support/TilemetaUtils';
+
+export default function (TileLayer, lang, promiseUtils) {
+  var dpi = 96, //pixel per inch
+    level = 99, //地图缩放级数
+    levelStart = 3, // 起始级数
+    maxlevel = 20, //地图总级数
+    resolution_0 = 156543.033880145821696, //第0级分辨率 米/像素
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102113
+    fullExtent = [705289.3147226945, 206299.30564637203, 19490490.956488788, 8865103.18739793], //[-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892]
+    origin = { x: -20037508.3427892, y: 20037508.3427892 }, //裁图原点
+    server = {
+      //出图服务参数
+      count: 4, //服务总数
+      start: 0, //服务起始编号
+      seq: 0, //当前请求编号
+      //矢量
+      'google-v':
+        window.location.protocol +
+        '//mt{num}.google.cn/vt/lyrs=m&gl=CN&x={col}&y={row}&z={level}&scale={scale}&type=map',
+      //影像
+      'google-i':
+        window.location.protocol +
+        '//mt{num}.google.cn/vt/lyrs=s&gl=CN&x={col}&y={row}&z={level}&scale={scale}&type=map',
+      //原始影像带注记
+      'google-i-a':
+        window.location.protocol +
+        '//mt{num}.google.cn/vt/lyrs=y&gl=CN&x={col}&y={row}&z={level}&scale={scale}&type=map',
+      //影像注记
+      'google-ia':
+        window.location.protocol +
+        '//mt{num}.google.cn/vt/lyrs=h&gl=CN&x={col}&y={row}&z={level}&scale={scale}&type=map',
+    };
+
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.GoogleTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，直接读取本地TileMetaData
+      return promiseUtils.resolve().then(
+        function () {
+          this.read(
+            TilemetaUtils.getTilemeta(
+              resolution_0,
+              dpi,
+              level,
+              levelStart,
+              wkid,
+              fullExtent,
+              origin,
+              tileSize,
+              format,
+            ),
+          );
+        }.bind(this),
+      );
+    },
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      server.seq++, (server.seq %= server.count);
+      return maxlevel < level
+        ? null
+        : lang.replace(server[this.layerType], {
+            num: server.seq + server.start,
+            row: row,
+            col: col,
+            level: level,
+            scale:
+              window.devicePixelRatio > 1
+                ? window.devicePixelRatio
+                : Math.ceil(window.devicePixelRatio),
+          });
+    },
+  });
+}

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) {
+  a.request.corsEnabledServers.push('a.tile.mapbox.org', 'b.tile.mapbox.org', 'c.tile.mapbox.org');
+  return b.createSubclass({
+    declaredClass: 'gis.layers.MapBoxLayer',
+    properties: {
+      copyright: 'Map data \x26copy; mapbox contributors, CC-BY-SA',
+      subDomains: { value: ['a', 'b', 'c'] },
+      urlTemplate:
+        'https://{subDomain}.tiles.mapbox.com/v4/mapbox.streets-basic/{level}/{col}/{row}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA',
+      operationalLayerType: 'mapbox',
+      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) {
+  var dpi = 96, //pixel per inch
+    level = 99, //地图缩放级数
+    levelStart = 0, // 起始级数
+    maxlevel = 20, //地图总级数
+    resolution_0 = 156543.033880145821696, //第0级分辨率 米/像素 156543.033880145821696
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102113
+    fullExtent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892], //[-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892]
+    origin = {
+      x: -20037508.3427892,
+      y: 20037508.3427892,
+    }, //裁图原点
+    server = {
+      //出图服务参数
+      'pipenet-tile':
+        window.location.protocol +
+        '//{url}/gwc/service/wmts?layer={baseLayer}&tilematrixset={tileMatrix}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={tileMatrix}%3A{level}&TileCol={col}&TileRow={row}',
+    };
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.PipenetTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，直接读取本地TileMetaData
+      return promiseUtils.resolve().then(
+        function () {
+          if (this.extent && this.extent.split(',').length == 4)
+            fullExtent = [
+              parseFloat(this.extent.split(',')[0]),
+              parseFloat(this.extent.split(',')[1]),
+              parseFloat(this.extent.split(',')[2]),
+              parseFloat(this.extent.split(',')[3]),
+            ];
+          if (this.levelStart && parseFloat(this.levelStart))
+            levelStart = parseFloat(this.levelStart);
+          if (this.resolution && parseFloat(this.resolution))
+            resolution_0 = parseFloat(this.resolution);
+          if (this.origin && this.origin.split(',').length == 2)
+            origin = {
+              x: parseFloat(this.origin.split(',')[0]),
+              y: parseFloat(this.origin.split(',')[1]),
+            };
+          this.read(
+            TilemetaUtils.getTilemeta(
+              resolution_0,
+              dpi,
+              level,
+              levelStart,
+              wkid,
+              fullExtent,
+              origin,
+              tileSize,
+              format,
+            ),
+          );
+        }.bind(this),
+      );
+    },
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      return lang.replace(server[this.layerType], {
+        row: row,
+        col: col,
+        level: level,
+        baseLayer: this.baseLayer,
+        url: this.url,
+        tileMatrix: this.tileMatrix ? this.tileMatrix : 'EPSG102113',
+      });
+    },
+    fetchTile: function (level, row, col) {
+      let url = this.getTileUrl(level, row, col);
+      let isNeedImg = _.isUndefined(this.isNeedImg) ? true : !!this.isNeedImg;
+      if (isNeedImg) {
+        var imgSrc = this.fillImgSrc || 'assets/images/webgis/常用工具/透明.png';
+        var img = new Image();
+        img.src = imgSrc;
+        img.width = img.height = tileSize;
+      }
+      return request(url, {
+        responseType: 'image',
+        cachBust: true,
+      })
+        .then(
+          function (response) {
+            if (response.data) return response.data;
+            if (isNeedImg) return img;
+            return null;
+          }.bind(this),
+        )
+        .otherwise(
+          function (error) {
+            if (isNeedImg) return img;
+            return null;
+          }.bind(this),
+        );
+    },
+  });
+});

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) {
+  var dpi = 96, //pixel per inch
+    level = 20, //地图总级数
+    levelStart = 3, // 起始级数
+    // levelStart = 11, // 起始级数
+    resolution_0 = 156543.0339280234, //第0级分辨率 米/像素
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102113
+    fullExtent = [705289.3147226945, 206299.30564637203, 19490490.956488788, 8865103.18739793], //[-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892]
+    origin = {
+      x: -20037508.3427892,
+      y: 20037508.3427892,
+    }, //裁图原点
+    wkid_ll = 4490,
+    resolution_0_ll = 0.703125,
+    // resolution_0_jn = 1.4881889763779584,
+    resolution_0_jn = 0.143984375,
+    fullExtent_jn = [-30.85, 60.594, -30.354, 61.327],
+    fullExtent_ll = [
+      -31.904360683593602,
+      60.32192850494357,
+      -29.267636660156114,
+      61.62381099151584,
+    ],
+    // fullExtent_ll = [-57.854119614257556, 53.119002722167735, -15.666535239257712, 72.56484239501923],
+    origin_ll = {
+      x: -180,
+      y: 90,
+    },
+    server = {
+      //出图服务参数
+      count: 3, //服务总数
+      start: 0, //服务起始编号
+      seq: 0, //当前请求编号
+      //球形墨卡托
+      //矢量
+      'tianditu-v':
+        window.location.protocol +
+        '//t{num}.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //矢量注记
+      'tianditu-va':
+        window.location.protocol +
+        '//t{num}.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //影像
+      'tianditu-i':
+        window.location.protocol +
+        '//t{num}.tianditu.com/DataServer?T=img_w&x={col}&y={row}&l={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //影像注记
+      'tianditu-ia':
+        window.location.protocol +
+        '//t{num}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //地形
+      'tianditu-t':
+        window.location.protocol +
+        '//t{num}.tianditu.com/DataServer?T=ter_w&x={col}&y={row}&l={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //地形注记
+      'tianditu-ta':
+        window.location.protocol +
+        '//t{num}.tianditu.com/DataServer?T=cta_w&x={col}&y={row}&l={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+
+      //经纬度
+      //矢量
+      'tianditu-ll-v':
+        window.location.protocol +
+        '//t{num}.tianditu.com/vec_c/wmts/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=vec&TileMatrixSet=c&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //矢量注记
+      'tianditu-ll-va':
+        window.location.protocol +
+        '//t{num}.tianditu.com/cva_c/wmts/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=cva&TileMatrixSet=c&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //影像
+      'tianditu-ll-i':
+        window.location.protocol +
+        '//t{num}.tianditu.com/img_c/wmts/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=img&TileMatrixSet=c&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //影像注记
+      'tianditu-ll-ia':
+        window.location.protocol +
+        '//t{num}.tianditu.com/cia_c/wmts/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=cia&TileMatrixSet=c&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //地形
+      'tianditu-ll-t':
+        window.location.protocol +
+        '//t{num}.tianditu.com/ter_c/wmts/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=ter&TileMatrixSet=c&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //地形注记
+      'tianditu-ll-ta':
+        window.location.protocol +
+        '//t{num}.tianditu.com/cta_c/wmts/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=cta&TileMatrixSet=c&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //江宁图层
+      'tianditu-jn-jn':
+        window.location.protocol +
+        '//58.213.148.61:8083/GZ_DT_9_20/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=image%2Ftile&serviceMode=KVP&layer=gz_dt_9_20&TileMatrixSet=Matrix_gz_dt_9_20_0&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //江宁注记图层
+      'tianditu-jn-jna':
+        window.location.protocol +
+        '//58.213.148.61:8083/GZ_ZJ_9_20/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=image%2Ftile&serviceMode=KVP&layer=gz_zj_9_20&TileMatrixSet=Matrix_gz_zj_9_20_0&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+      //江宁影像
+      'tianditu-jn-jni':
+        window.location.protocol +
+        '//58.213.23.212:7003/NJ_DSX_YX/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=image%2Ftile&serviceMode=KVP&layer=nj_dsx_yx&TileMatrixSet=Matrix_nj_dsx_yx_0&TileRow={row}&TileCol={col}&TileMatrix={level}&type=map&tk=eef0de4d706219489963a14e1c1263bb',
+    };
+
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.TiandituTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，读取本地TileMetaData
+      return promiseUtils.resolve().then(
+        function () {
+          var tilemeta =
+            this.layerType.indexOf('-ll-') == -1
+              ? this.layerType.indexOf('-jn-') == -1
+                ? TilemetaUtils.getTilemeta(
+                    resolution_0,
+                    dpi,
+                    level,
+                    levelStart,
+                    wkid,
+                    fullExtent,
+                    origin,
+                    tileSize,
+                    format,
+                  )
+                : TilemetaUtils.getTilemeta(
+                    resolution_0_ll,
+                    dpi,
+                    level,
+                    levelStart,
+                    wkid_ll,
+                    fullExtent_jn,
+                    origin_ll,
+                    tileSize,
+                    format,
+                    true,
+                  )
+              : TilemetaUtils.getTilemeta(
+                  resolution_0_ll,
+                  dpi,
+                  level,
+                  levelStart,
+                  wkid_ll,
+                  fullExtent_ll,
+                  origin_ll,
+                  tileSize,
+                  format,
+                  true,
+                );
+          this.read(tilemeta);
+        }.bind(this),
+      );
+    },
+
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      server.seq++, (server.seq %= server.count);
+      return lang.replace(server[this.layerType], {
+        num: server.seq + server.start,
+        row: row,
+        col: col,
+        level: level,
+      });
+    },
+  });
+});

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) {
+  var dpi = 96, //pixel per inch
+    level = 99, //地图缩放级数
+    levelStart = 0, // 起始级数
+    maxlevel = 20, //地图总级数
+    resolution_0 = 156543.033880145821696, //第0级分辨率 米/像素 156543.033880145821696
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102113
+    fullExtent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892], //[-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892]
+    origin = {
+      x: -20037508.3427892,
+      y: 20037508.3427892,
+    }, //裁图原点
+    server = {
+      //出图服务参数
+      count: 4, //服务总数
+      start: 0, //服务起始编号
+      seq: 0, //当前请求编号
+      //自定义
+      'google-user':
+        window.location.protocol +
+        '//{url}/gwc/service/wmts?layer={baseLayer}&style=&tilematrixset={tileMatrix}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={tileMatrix}%3A{level}&TileCol={col}&TileRow={row}',
+    };
+
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.UserTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，直接读取本地TileMetaData
+      return promiseUtils.resolve().then(
+        function () {
+          if (this.extent !== '' && this.extent.split(',').length == 4)
+            fullExtent = [
+              parseFloat(this.extent.split(',')[0]),
+              parseFloat(this.extent.split(',')[1]),
+              parseFloat(this.extent.split(',')[2]),
+              parseFloat(this.extent.split(',')[3]),
+            ];
+          if (this.levelStart !== '' && parseFloat(this.levelStart))
+            levelStart = parseFloat(this.levelStart);
+          if (this.levelEnd && this.levelEnd == this.levelStart) {
+            level = parseInt(this.levelStart) + 1;
+            if (_config.client != 'sandbox')
+              mapManager.view.on('drag', (e) => {
+                e.stopPropagation();
+              });
+          } else if (this.levelEnd) {
+            level = parseInt(this.levelEnd) + 1;
+          } else {
+          }
+          if (this.resolution !== '' && parseFloat(this.resolution))
+            resolution_0 = parseFloat(this.resolution);
+          if (this.origin !== '' && this.origin.split(',').length == 2)
+            origin = {
+              x: parseFloat(this.origin.split(',')[0]),
+              y: parseFloat(this.origin.split(',')[1]),
+            };
+          this.read(
+            TilemetaUtils.getTilemeta(
+              resolution_0,
+              dpi,
+              level,
+              levelStart,
+              wkid,
+              fullExtent,
+              origin,
+              tileSize,
+              format,
+            ),
+          );
+        }.bind(this),
+      );
+    },
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      server.seq++, (server.seq %= server.count);
+      return lang.replace(server[this.layerType], {
+        num: server.seq + server.start,
+        row: row,
+        col: col,
+        level: level,
+        url: this.url,
+        baseLayer: this.baseLayer,
+        scale:
+          window.devicePixelRatio > 1
+            ? window.devicePixelRatio
+            : Math.ceil(window.devicePixelRatio),
+        tileMatrix: this.tileMatrix ? this.tileMatrix : 'EPSG:900913',
+      });
+    },
+  });
+});

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) {
+  var dpi = 96, //pixel per inch
+    level = 19, //地图总级数
+    levelStart = 9, // 起始级数
+    resolution_0 = 156543.03390625, //第0级分辨率 米/像素
+    tileSize = 256, //瓦片大小
+    format = 'PNG', //图片格式
+    wkid = 4526, //102113
+    fullExtent = [705289.3147226945, 206299.30564637203, 19490490.956488788, 8865103.18739793], //
+    origin = { x: -20037508.3427892, y: 20037508.3427892 }, //裁图原点
+    server =
+      '{ip}/gwc/rest/wmts/{name}/EPSG%3A900913/EPSG%3A900913%3A{level}/{row}/{col}?format=image/vnd.jpeg-png&type=map';
+
+  return TileLayer.createSubclass([], {
+    declaredClass: 'gis.layers.WMTSTileLayer',
+    _fetchService: function () {
+      //重写 获取元数据，读取本地TileMetaData
+      return promiseUtils.resolve().then(
+        function () {
+          this.read(
+            TilemetaUtils.getTilemeta(
+              resolution_0,
+              dpi,
+              level,
+              levelStart,
+              wkid,
+              fullExtent,
+              origin,
+              tileSize,
+              format,
+            ),
+          );
+        }.bind(this),
+      );
+    },
+    getTileUrl: function (level, row, col) {
+      //重写 获取瓦片服务地址
+      return lang.replace(server, {
+        ip: this.url,
+        name: this.title,
+        row: row,
+        col: col,
+        level: level,
+        scale: 1,
+      });
+    },
+  });
+});
+
+import gisConfig from '../../config/gis';
+const modules = [
+  'gis/layers/TileLayer',
+  'dojo/_base/lang',
+  'gis/core/promiseUtils',
+  './support/TilemetaUtils',
+];

packages/map/src/extensions/layers/support/TilemetaUtils.js

+function toLODs(resolution_0, dpi, level, isDegree) {
+  var lods = [],
+    i = 0,
+    r = resolution_0,
+    s = (r * dpi) / 0.0254;
+  s = (r * dpi) / 0.02687999999999999793948033361118;
+  // isDegree === true && (s *= 111194.872221777);
+  isDegree === true && (s *= 111319.49079327358);
+
+  while (i < level) {
+    i > 0 && ((r /= 2), (s /= 2));
+    lods.push({ level: i, resolution: r, scale: s });
+    i++;
+  }
+  return lods;
+}
+
+function getTilemeta(
+  resolution_0,
+  dpi,
+  level,
+  levelStart,
+  wkid,
+  fullExtent,
+  origin,
+  tileSize,
+  format,
+  unit,
+) {
+  return {
+    copyrightText: '熊猫智慧水务',
+    description: '',
+    documentInfo: {
+      Title: null,
+      Author: null,
+      Comments: null,
+      Subject: null,
+      Category: null,
+      Keywords: null,
+    },
+    fullExtent: {
+      spatialReference: {
+        wkid: wkid,
+      },
+      xmin: fullExtent[0],
+      ymin: fullExtent[1],
+      xmax: fullExtent[2],
+      ymax: fullExtent[3],
+    },
+    hasVersionedData: false,
+    hasAnnotation: false,
+    initialExtent: {
+      spatialReference: {
+        wkid: wkid,
+      },
+      xmin: fullExtent[0],
+      ymin: fullExtent[1],
+      xmax: fullExtent[2],
+      ymax: fullExtent[3],
+    },
+    layers: null,
+    mapName: 'tianditutile',
+    minScale: 0,
+    maxScale: 0,
+    serviceDescription: null,
+    singleFusedMapCache: false,
+    spatialReference: {
+      wkid: wkid,
+    },
+    supportsDynamicLayers: false,
+    tileInfo: {
+      dpi: dpi,
+      format: format,
+      rows: tileSize,
+      cols: tileSize,
+      lods: toLODs(resolution_0, dpi, level, unit).slice(levelStart),
+      origin: origin,
+      spatialReference: {
+        wkid: wkid,
+      },
+    },
+    units: 'meters',
+    currentVersion: 10.3,
+    capabilities: null,
+  };
+}
+
+export default { toLODs, getTilemeta };

packages/map/src/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import esriLoader from 'esri-loader';
 
-export class CreateMap extends React.Component {
+import amapConfig from './config/amap';
+import gisModules from './config/module';
+
+import AMapTileLayer from './extensions/layers/AMapTileLayer';
+import GoogleTileLayer from './extensions/layers/GoogleTileLayer';
+
+import * as utils from './utils/utils';
+
+export default class MapManager extends React.Component {
   static defaultProps = {
     id: '#jsmap',
     width: '100%',
-    height: '350px',
+    height: '420px',
+    mapsettings: {},
+    modules: gisModules,
   };
 
   constructor(props) {
     super(props);
-    this.state = {
-      view: null,
-    };
     this.mapRef = React.createRef();
+    this.initializeVariables();
+  }
+
+  initializeVariables() {
+    this.view = null;
+    this.map = null;
+    this.basemap = null;
+    this.tipManager = null;
+    this.AreaLayerSum = null;
+    this.mapsettings = this.props.mapsettings;
     window._config = {
-      userInfo: {
       site: '',
-      },
+    };
+  }
+
+  getStyle() {
+    return {
+      width: this.props.width,
+      height: this.props.height,
     };
   }
 
   componentDidMount() {
-    let modules = ['gis/Map', 'gis/views/MapView', 'dojo/domReady!'];
-    loadModules(modules).then(
-      function (results) {
-        let Map = results[0];
-        let MapView = results[1];
-
-        const map = new Map({
-          basemap: 'satellite',
+    utils.loadModules(this.props.modules).then(
+      function (moduleArr) {
+        this.getModules(moduleArr);
+        this.createMapLayers();
+        this.renderView();
+      }.bind(this),
+    );
+  }
+
+  getModules(moduleArr) {
+    this.loadedModules = {
+      Map: moduleArr[0],
+      BaseMap: moduleArr[1],
+      MapView: moduleArr[2],
+      SceneView: moduleArr[3],
+      TileLayer: moduleArr[4],
+      MapImageLayer: moduleArr[5],
+      ElevationLayer: moduleArr[6],
+      Ground: moduleArr[7],
+      SceneLayer: moduleArr[8],
+      FeatureLayer: moduleArr[9],
+      GroupLayer: moduleArr[10],
+      VectorTileLayer: moduleArr[11],
+      OpenStreetMapLayer: moduleArr[12],
+      Extent: moduleArr[13],
+      Collection: moduleArr[14],
+      Camera: moduleArr[15],
+      Viewpoint: moduleArr[16],
+      jsonUtils: moduleArr[17],
+      watchUtils: moduleArr[18],
+      Graphic: moduleArr[19],
+      PictureMarkerSymbol: moduleArr[20],
+      Popup: moduleArr[21],
+      GraphicsLayer: moduleArr[22],
+      matrix: moduleArr[23],
+      Color: moduleArr[24],
+      SimpleFillSymbol: moduleArr[25],
+      SimpleLineSymbol: moduleArr[26],
+      TextSymbol: moduleArr[27],
+      Point: moduleArr[28],
+      lang: moduleArr[29],
+      promiseUtils: moduleArr[30],
+    };
+  }
+
+  createMapLayers() {
+    this.loadedModules.AMapTileLayer = AMapTileLayer(
+      this.loadedModules.TileLayer,
+      this.loadedModules.lang,
+      this.loadedModules.promiseUtils,
+    );
+    this.loadedModules.GoogleTileLayer = GoogleTileLayer(
+      this.loadedModules.TileLayer,
+      this.loadedModules.lang,
+      this.loadedModules.promiseUtils,
+    );
+  }
+
+  renderView() {
+    this.addLayerProxy();
+    this.addMap();
+    this.addBasemaps();
+  }
+
+  addLayerProxy() {}
+
+  addMap() {
+    const mapsettings = this.mapsettings;
+    this.map = new this.loadedModules.Map();
+    if (this.mapsettings.ground) {
+      if ('string' == typeof this.mapsettings.ground) {
+        this.map.ground = this.mapsettings.ground;
+      } else {
+        var layers = mapsettings.ground.layers,
+          layer,
+          groundlayers = new this.loadedModules.Collection();
+        layers.forEach(
+          function (layerconfig) {
+            this.createLayer(layerconfig, groundlayers, false, '');
+          }.bind(this),
+        );
+        this.map.ground = new Ground({
+          layers: groundlayers,
         });
-        // Create a MapView instance (for 2D viewing) and reference the map instance
-        const view = new MapView({
-          center: [120.2, 32.1],
-          map: map,
+      }
+    }
+    if ('2d' == mapsettings.type.toLowerCase()) {
+      this.view = new this.loadedModules.MapView({
+        map: this.map,
         container: this.mapRef.current,
-          zoom: 5,
+        manager: this,
+        resizeAlign: mapsettings.resizeAlign || 'top-left',
       });
+    } else if ('3d' == mapsettings.type.toLowerCase()) {
+      this.view = new this.loadedModules.SceneView({
+        map: this.map,
+        manager: this,
+        qualityProfile: mapsettings.qualityProfile || 'high',
+        container: this.mapRef.current,
+      });
+      if (mapsettings.viewingMode) {
+        this.view.viewingMode = mapsettings.viewingMode;
+      }
+      if (mapsettings.environment) {
+        this.view.environment = mapsettings.environment;
+      }
+      if (mapsettings.clippingArea) {
+        this.view.clippingArea = new Extent(mapsettings.clippingArea);
+      }
+      if (mapsettings.extent) {
+        this.view.extent = new Extent(mapsettings.extent);
+      }
+    }
+    //设置View初始范围
+    this.viewpoint = mapsettings.viewpoint;
+    this.setInitialViewpoint = this.setInitialViewpoint.bind(this);
+    this.view.then(this.setInitialViewpoint);
+  }
 
-        view.when(
-          function () {
-            console.log('resolved');
-            // This function will execute once the promise is resolved
-          },
-          function (error) {
-            console.log(error);
-            // This function will execute if the promise is rejected due to an error
-          },
+  setInitialViewpoint() {}
+
+  addBasemaps() {
+    let basemapconfigs = this.mapsettings.basemaps;
+    this.basemaps = [];
+    if (basemapconfigs) {
+      basemapconfigs.forEach(
+        function (basemapconfig) {
+          this.basemaps.push(this.createBasemap(basemapconfig));
+        }.bind(this),
       );
+    } else {
+      this.basemaps.push(this.createDefaultBasemap());
+    }
+
+    if (this.basemaps.length) {
+      this.map.basemap = this.basemaps[0];
+    }
+  }
 
-        window.viewLocal = view;
-        console.log(window.viewLocal);
+  createBasemap(basemap) {
+    var bm;
+    if (basemap) {
+      if ('string' == typeof basemap) {
+        bm = basemap;
+      } else {
+        // var layer,
+        var bls = new this.loadedModules.Collection(),
+          id = basemap.id,
+          title = basemap.title,
+          thumbnailUrl = basemap.thumbnailUrl,
+          baseLayers = basemap.baseLayers;
+        baseLayers.forEach(
+          function (layerconfig) {
+            this.createLayer(layerconfig, bls, false, 'baseMap');
           }.bind(this),
         );
+        bm = new this.loadedModules.BaseMap({
+          id: id,
+          title: title,
+          thumbnailUrl: thumbnailUrl,
+          baseLayers: bls,
+        });
+      }
+    }
+    return bm;
   }
 
-  render() {
-    return (
-      <div id={this.props.id} ref={this.mapRef} style={this.getStyle()}>
-        地图容器
-      </div>
+  createDefaultBasemap() {}
+
+  createLayer(config, collection, returnLayer, layerType) {
+    var layer;
+    var layers = [];
+    if (config.url) {
+      //config.url = urlUtils.getUrl(config.url);
+    }
+    switch (config.layerType.toLowerCase()) {
+      case 'tilelayer':
+        layer = new this.loadedModules.TileLayer(config);
+        break;
+      case 'pipenetlayer':
+      case 'mapimagelayer':
+        layer = new this.loadedModules.MapImageLayer(
+          utils._.extend({}, config, {
+            token: _config.token,
+            client: 'webgis',
+            visible: false,
+          }),
         );
+        layer.then(
+          function () {
+            if (layer.hasAnnotation) {
+              //  layer.annotationLayer = this.addAnnotationLayer(layer.title, layer.url, config.visible);
             }
+          }.bind(this),
+        );
+        break;
+      case 'elevationlayer':
+        layer = new this.loadedModules.ElevationLayer(config);
+        break;
+      case 'scenelayer':
+        layer = new this.loadedModules.SceneLayer(config);
+        break;
+      case 'featurelayer':
+        layer = new this.loadedModules.FeatureLayer(config);
+        break;
+      case 'grouplayer':
+        var layers = config.layers.map(function (c) {
+          return this.createLayer(c, [], true, '');
+        }, this);
+        layer = new this.loadedModules.GroupLayer(
+          utils._.extend({}, config, {
+            layers: layers,
+          }),
+        );
+        break;
+      case 'google-v':
+      case 'google-i':
+      case 'google-i-a':
+      case 'google-ia':
+        layer = new this.loadedModules.GoogleTileLayer(
+          utils._.extend(config, {
+            url: 'http://fack.com',
+          }),
+        );
+        break;
+      case 'google-user':
+        var proxyUrl = config.proxyUrl ? config.proxyUrl : config.wmtsUrl ? config.wmtsUrl : null;
+        layer = new this.loadedModules.UserTileLayer(
+          utils._.extend(config, {
+            url: proxyUrl,
+          }),
+        );
+        layer.then((res) => console.log(res));
+        break;
+      case 'pipenet-tile':
+        var proxyUrl = config.proxyUrl ? config.proxyUrl : config.wmtsUrl ? config.wmtsUrl : null;
+        layer = new this.loadedModules.PipenetTileLayer(
+          utils._.extend(config, {
+            url: proxyUrl,
+          }),
+        );
+        break;
+      case 'baidu-v':
+      case 'baidu-i':
+      case 'baidu-ia':
+        layer = new this.loadedModules.BaiduTileLayer(
+          utils._.extend(config, {
+            url: 'http://fack.com',
+          }),
+        );
+        break;
+      case 'amap-v':
+      case 'amap-i':
+      case 'amap-ia':
+      case 'amap-v2':
+      case 'amap-i2':
+      case 'amap-ia2':
+        layer = new this.loadedModules.AMapTileLayer(
+          utils._.extend(config, {
+            url: 'http://fack.com',
+          }),
+        );
+        break;
+      case 'tianditu-v':
+      case 'tianditu-va':
+      case 'tianditu-i':
+      case 'tianditu-ia':
+      case 'tianditu-t':
+      case 'tianditu-ta':
+      case 'tianditu-ll-v':
+      case 'tianditu-ll-va':
+      case 'tianditu-ll-i':
+      case 'tianditu-ll-ia':
+      case 'tianditu-ll-t':
+      case 'tianditu-ll-ta':
+        layer = new this.loadedModules.TiandituTileLayer(
+          utils._.extend(config, {
+            url: 'http://fack.com',
+          }),
+        );
+        break;
+      case 'tianditu-v-va':
+        //深拷贝config
+        var configString = JSON.stringify(config);
+        //天地图矢量
+        var configv = utils._.extend(JSON.parse(configString), {
+          layerType: 'tianditu-v',
+        });
+        this.createLayer(configv, collection, false, layerType);
 
-  getStyle() {
-    return {
-      width: this.props.width,
-      height: this.props.height,
-    };
+        //天地图注记
+        var configva = utils._.extend(JSON.parse(configString), {
+          layerType: 'tianditu-va',
+        });
+        this.createLayer(configva, collection, false, layerType);
+        break;
+      case 'tianditu-i-ia':
+        //深拷贝config
+        var configString = JSON.stringify(config);
+        //天地图矢量
+        var configi = utils._.extend(JSON.parse(configString), {
+          layerType: 'tianditu-i',
+        });
+        this.createLayer(configi, collection, false, layerType);
+
+        //天地图注记
+        var configia = utils._.extend(JSON.parse(configString), {
+          layerType: 'tianditu-ia',
+        });
+        this.createLayer(configia, collection, false, layerType);
+
+        break;
+      case 'osm':
+        layer = new this.loadedModules.OpenStreetMapLayer(
+          utils._.extend(config, {
+            url: 'http://fack.com',
+          }),
+        );
+        break;
+      case 'wmts-v':
+        layer = new this.loadedModules.WMTSTileLayer(utils._.extend(config, {}));
+        break;
+      case 'arcgis-streetpurplishblue':
+      case 'arcgis-streetwarm':
+      case 'arcgis-community':
+      case 'arcgis-streetgray':
+        layer = new this.loadedModules.TileLayer(
+          utils._.extend(config, {
+            url:
+              'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnline' +
+              config.layerType.replace('arcgis-', '') +
+              '/MapServer',
+          }),
+        );
+        break;
+      case 'arcgis-tilelayer':
+        if (_config.ip.indexOf('222.92') > -1)
+          config.url = config.url.replace(/\d+\.\d+\.\d+\.\d+/, window.location.hostname);
+        layer = new this.loadedModules.TileLayer({
+          url: config.url,
+          title: config.title,
+          //    id: _.uniqueId('arcgis-tilelayer_')
+        });
+        break;
+      default:
+        if (config.layerType.toLowerCase().indexOf('tianditu-') > -1) {
+          layer = new this.loadedModules.TiandituTileLayer(
+            utils._.extend(config, {
+              url: 'http://fack.com',
+            }),
+          );
+          break;
+        }
+        break;
+    }
+    //returnLayer 是否需要返回layer
+    if (returnLayer) return layer;
+
+    //layer未给值
+    if (_.isUndefined(layer)) return this._layerCreateErrorLog(config);
+
+    //layerType
+    switch (layerType) {
+      case 'baseMap':
+        layer.visible = true;
+        break;
+      case 'pipeLayer':
+        utils._.extend(layer, {
+          preload: true,
+        });
+        break;
+      default:
+        break;
+    }
+    collection.add(layer);
+  }
+
+  render() {
+    return <div ref={this.mapRef} id={this.props.id} style={this.getStyle()}></div>;
   }
 }
 
-CreateMap.propTypes = {
+MapManager.propTypes = {
   id: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
+  mapsettings: PropTypes.object,
+  modules: PropTypes.array,
 };
-
-export function loadModules(modules = [], mapSettings = {}) {
-  let mergeMapSettings = Object.assign(getMapSettings(), mapSettings);
-  return new Promise(
-    function (resolve, reject) {
-      esriLoader.loadModules(modules, mergeMapSettings).then(
-        function (array) {
-          resolve(array);
-        }.bind(this),
-      );
-    }.bind(this),
-  );
-}
-
-export function getMapSettings() {
-  let origin = location.origin;
-  return {
-    url: origin + '/gis/4.9/init.js',
-    css: origin + '/gis/4.9/gis/css/main.css',
-    dojoConfig: {
-      has: {
-        'gis-featurelayer-webgl': 1,
-      },
-      aliases: [
-        [
-          /^webgl-engine/,
-          function () {
-            return 'gis/views/3d/webgl-engine';
-          },
-        ],
-        [
-          /^engine/,
-          function () {
-            return 'gis/views/3d/webgl-engine';
-          },
-        ],
-        [
-          /^gis-hydra/,
-          function () {
-            return 'gis';
-          },
-        ],
-        ['text', 'dojo/text'],
-      ],
-      async: 1,
-      async: 1,
-      baseUrl: './',
-      packages: [
-        {
-          location: origin + '/' + 'gis/4.9/dojo',
-          name: 'dojo',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/dijit',
-          name: 'dijit',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/dojox',
-          name: 'dojox',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/dgrid',
-          main: 'OnDemandGrid',
-          name: 'dgrid',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/dstore',
-          main: 'Store',
-          name: 'dstore',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/gis',
-          name: 'gis',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/moment',
-          main: 'moment',
-          name: 'moment',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/@dojo',
-          name: '@dojo',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/cldrjs',
-          main: 'dist/cldr',
-          name: 'cldrjs',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/globalize',
-          main: 'dist/globalize',
-          name: 'globalize',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/maquette',
-          main: 'dist/maquette.umd',
-          name: 'maquette',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/maquette-css-transitions',
-          main: 'dist/maquette-css-transitions.umd',
-          name: 'maquette-css-transitions',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/maquette-jsx',
-          main: 'dist/maquette-jsx.umd',
-          name: 'maquette-jsx',
-        },
-        {
-          location: origin + '/' + 'gis/4.9/tslib',
-          main: 'tslib',
-          name: 'tslib',
-        },
-      ],
-      hasCache: {
-        'config-deferredInstrumentation': 0,
-        'config-selectorEngine': 'acme',
-        'config-tlmSiblingOfDojo': 1,
-        'dojo-built': 1,
-        'dojo-has-api': 1,
-        'dojo-loader': 1,
-        'dojo-undef-api': 0,
-        dom: 1,
-        'host-browser': 1,
-        'gis-built': 1,
-        'gis-featurelayer-webgl': 0,
-        'gis-promise-compatibility': !1,
-        'gis-promise-compatibility-deprecation-warnings': !1,
-      },
-      map: {
-        globalize: {
-          cldr: 'cldrjs/dist/cldr',
-          'cldr/event': 'cldrjs/dist/cldr/event',
-          'cldr/supplemental': 'cldrjs/dist/cldr/supplemental',
-          'cldr/unresolved': 'cldrjs/dist/cldr/unresolved',
-        },
-      },
-    },
-  };
-}

packages/map/src/map.md

@@ -19,4 +19,4 @@ group:
 
 初始化一个地图容器
 
-<code src = "./demos/createMap.jsx">
+<code src = './demos/createMap.jsx'>

packages/map/src/mapData.js

+export default {
+  areasettings: {
+    areaName: '滦州市',
+    backgroundColor: '#19233c',
+    backgroundOpacity: '0.4',
+    boundColor: '#86c8f8',
+    boundWidth: '10px',
+    extent: '13211791.426855791,4825720.406477634,13220693.600125099,4830993.093282172',
+  },
+  basemaps: [
+    {
+      id: '高德地形',
+      thumbnailUrl: 'assets/images/thumbnail_2.jpg',
+      title: '高德地形',
+      baseLayers: [
+        {
+          baseLayer: '',
+          extent: '',
+          icon: '',
+          layerType: 'amap-v',
+          levelEnd: '',
+          levelStart: '',
+          opacity: 1,
+          origin: '',
+          proxyUrl: '',
+          resolution: '',
+          style: '',
+          tileMatrix: '',
+          title: '高德地形',
+          url: '',
+          useProxy: false,
+          visible: false,
+        },
+      ],
+    },
+  ],
+  layers: [
+    {
+      areaName: '滦州市',
+      backgroundColor: '#19233c',
+      backgroundOpacity: '0.4',
+      baseLayer: '',
+      basemaps: [
+        {
+          id: '高德地形',
+          thumbnailUrl: 'assets/images/thumbnail_2.jpg',
+          title: '高德地形',
+          baseLayers: [
+            {
+              baseLayer: '',
+              extent: '',
+              icon: '',
+              layerType: 'amap-v',
+              levelEnd: '',
+              levelStart: '',
+              opacity: 1,
+              origin: '',
+              proxyUrl: '',
+              resolution: '',
+              style: '',
+              tileMatrix: '',
+              title: '高德地形',
+              url: '',
+              useProxy: false,
+              visible: false,
+            },
+          ],
+        },
+      ],
+      boundColor: '#86c8f8',
+      boundWidth: '10px',
+      extent: '13211791.426855791,4825720.406477634,13220693.600125099,4830993.093282172',
+      icon: '',
+      id: 'luanzhouYS',
+      layerType: 'PipenetLayer',
+      levelStart: '',
+      opacity: 1,
+      origin: '',
+      proxyUrl: '',
+      resolution: '',
+      roles: '',
+      schemename: '100时空专题图',
+      showLegend: true,
+      tileMatrix: '',
+      title: 'luanzhouYS',
+      url: 'CityInterface/rest/services/MapServer.svc/luanzhouYS',
+      useProxy: true,
+      visible: true,
+      wmtsUrl: '',
+    },
+  ],
+  proxyUrl: '',
+  type: '2d',
+  viewingMode: 'global',
+  viewpoint: {
+    camera: {
+      fov: 55,
+      heading: 0,
+      tilt: 0,
+      position: {
+        x: 0,
+        y: 0,
+        z: 0,
+        spatialReference: {
+          wkid: 4526,
+        },
+      },
+    },
+    targetGeometry: {
+      spatialReference: {
+        wkid: 4526,
+      },
+      xmin: 0,
+      ymin: 0,
+      xmax: 0,
+      ymax: 0,
+    },
+  },
+};

packages/map/src/utils/utils.js

+import gisConfig from '../config/gis';
+import esriLoader from 'esri-loader';
+
+export const _ = require('lodash');
+
+export function loadModules(modules = [], mapSettings = {}) {
+  let mergeMapSettings = Object.assign(gisConfig, mapSettings);
+  return new Promise(
+    function (resolve, reject) {
+      esriLoader.loadModules(modules, mergeMapSettings).then(
+        function (array) {
+          resolve(array);
+        }.bind(this),
+      );
+    }.bind(this),
+  );
+}
+
+// export const urlUtils = window.urlUtils || function() {}
+
+// export urlUtils