WebAppbuilder脱离portal

WebAppbuilder是目前Esri推出的号称零代码实现程序定制的工具，笔者16年就开始使用，但是由WebAppbuilder定制的程序，打包运行，默认是需要关联portal的，非常不方便，笔者经过研究，将定制后的程序实现了与Portal的脱离，稍加修改，就可以将定制好的程序在Tomcat或nginx中部署运行

 

1、定制程序，WebAppbuilder的运行运行连接portal，这里笔者建议直接连接arcgis online账户，或者直接拿Webappbuilder里面的stemapp源程序进行修改

2、修改的文件包括config.json 、env.js 、jimu.js/ConfigLoader.js  jimu.js/MapManager.js  jimu.js/LayerInfos/LayerInfos.js五个文件

3、env.js主要将arcgis js的路径本地话，这里不再赘述

4、config.json  

     添加标签“useportal”:false

    在map标签中添加需要默认显示的底图和专题数据，以下面为例： 

 "map": {

    "3D": false,

    "2D": true,

    "position": {

      "left": 0,

      "top": 40,

      "right": 0,

      "bottom": 0

    },

    "mapOptions": {

      "extent": {

        "xmin": -179.99999,

        "ymin": -89.99999,

        "xmax": 179.99999,

        "ymax": 89.99999,

        "spatialReference": {

          "wkid": 4326

        }

      },

      "spatialReference": {}

    },

    "basemaps": [{

      "label": "测试",

      "type": "tiled",

      "url": ".../MapServer",

      "visible": true,

      "icon": ""

    }],

    "id":"map",

    "portalUrl": "",

    "operationallayers": [

    {

      "label": "11",

      "type": "tiled",

      "url": "http:///MapServer",

      "visible": true,

      "icon": ""

    }, {

      "label": "12",

      "type": "tiled",

      "url": "http:///MapServer",

      "visible": true,

      "icon": ""

    }, {

      "label": "22",

      "type": "tiled",

      "url": "http://2/MapServer",

      "visible": false,

      "icon": ""

    }, {

      "label": "44",

      "type": "tiled",

      "url": "hg/MapServer",

      "visible": false,

      "icon": ""

    }]

  },

5、 jimu.js/ConfigLoader.js

在loadConfig函数里添加脱离portal部分

原函数：

loadConfig: function() {

        console.time('Load Config');

        return this._tryLoadConfig().then(lang.hitch(this, function(appConfig) {

          var err = this.checkConfig(appConfig);

          if (err) {

            throw Error(err);

          }

          this.rawAppConfig = lang.clone(appConfig);

          AppStateManager.getInstance().setRawAppConfig(this.rawAppConfig);

          appConfig = this._upgradeAppConfig(appConfig);

          this._processAfterTryLoad(appConfig);

          this.appConfig = appConfig;





          if (this.urlParams.id) {

            return this.loadWidgetsManifest(appConfig).then(lang.hitch(this, function() {

              return this.loadAndUpgradeAllWidgetsConfig(appConfig);

            })).then(lang.hitch(this, function(appConfig) {

              return this.updateNecessaryAttrOfResourceUrlInAppConfig(appConfig, this.urlParams.id);

            })).then(lang.hitch(this, function() {

              this._configLoaded = true;

              this._setDocumentTitle(appConfig);





              this._readAndSetSharedTheme(appConfig);

              return this.getAppConfig();

            }));

修改后：

loadConfig: function() {

        console.time('Load Config');

        return this._tryLoadConfig().then(lang.hitch(this, function(appConfig) {

          var err = this.checkConfig(appConfig);

          if (err) {

            throw Error(err);

          }

          this.rawAppConfig = lang.clone(appConfig);

          AppStateManager.getInstance().setRawAppConfig(this.rawAppConfig);

          appConfig = this._upgradeAppConfig(appConfig);

          this._processAfterTryLoad(appConfig);

          this.appConfig = appConfig;



          if (appConfig.useportal === false) {

            return this.loadWidgetsManifest(appConfig).then(lang.hitch(this, function() {

              return this.loadAndUpgradeAllWidgetsConfig(appConfig);

            })).then(lang.hitch(this, function() {

              this._configLoaded = true;

              this._setDocumentTitle(appConfig);

              return this.getAppConfig();

            }));

          } else if (this.urlParams.id) {

            return this.loadWidgetsManifest(appConfig).then(lang.hitch(this, function() {

              return this.loadAndUpgradeAllWidgetsConfig(appConfig);

            })).then(lang.hitch(this, function(appConfig) {

              return this.updateNecessaryAttrOfResourceUrlInAppConfig(appConfig, this.urlParams.id);

            })).then(lang.hitch(this, function() {

              this._configLoaded = true;

              this._setDocumentTitle(appConfig);





              this._readAndSetSharedTheme(appConfig);

6、jimu.js/MapManager.js

添加函数：(注意开头添加Map的引用)

_show2DWebMap_NoPortal: function(appConfig) {

        //should use appConfig instead of this.appConfig, because appConfig is new.

        if (!appConfig.map.mapOptions) {

          appConfig.map.mapOptions = {};

        }

        var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};

        mapOptions.isZoomSlider = false;

        

        var map = new Map(this.mapDivId, mapOptions);

        //hide the default zoom slider

        // map.hideZoomSlider();

        // set default size of infoWindow.

        map.infoWindow.resize(270, 316);

        //var extent;

        map.itemId = null; // appConfig.map.itemId;

        map.itemInfo = {

          itemData: {

            basemap: {

              baseMapLayers: [],

              operationalLayers: [],

              tables: []

            }

          }

        }; // response.itemInfo;

        //  map.webMapResponse = response;

        // enable snapping

        var options = {

          snapKey: keys.copyKey

        };

        map.enableSnapping(options);



        html.setStyle(map.root, 'zIndex', 0);

        map._initialExtent = map.extent;

        LayerInfos.getInstance(map, map.itemInfo).then(lang.hitch(this, function(layerInfosObj) {

          this.layerInfosObj = layerInfosObj;

          this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo) {

            layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject) {

              if (layerObject) {

                lang.setObject("_wabProperties.originalRefreshinterval", layerObject.refreshInterval, layerObject)

              }

            }), lang.hitch(this, function(err) {

              console.error("can't get layerObject", err)

            }))

          }));

          this._showUnreachableLayersTitleMessage();

          this._visitConfigMapLayers(appConfig, lang.hitch(this, function(layerConfig) {

            this.createLayer(map, '2D', layerConfig);

          }));

          this._publishMapEvent(map);

          setTimeout(lang.hitch(this, this._checkAppState), 500);

          // this.loading.hide();

          this._addDataLoadingOnMapUpdate(map);

        }));

      },

在_showMap函数中，添加_show2DWebMap_NoPortal函数

_showMap: function(appConfig) {

        // console.timeEnd('before map');

        console.time('Load Map');

        if (appConfig.useportal === false) {

          this._show2DWebMap_NoPortal(appConfig);

        } else if (appConfig.map.itemId) {

          this._show2DWebMap(appConfig);

        } else {

          console.log('No webmap found. Please set map.itemId in config.json.');

        }

7、jimu.js/LayerInfos/LayerInfos.js 改造构造函数，修改如下：   

 constructor: function(map, webmapItemData) {

      this._objectId = Math.random();

      this._unreachableLayersTitleOfWebmap = [];

      //this._basemapLayers = webmapItemData.baseMap.baseMapLayers;

     // this._operLayers = webmapItemData.operationalLayers;

      //this._tables = webmapItemData.tables;

      this._layerInfoFactory = new LayerInfoFactory(map, this);

      //改造非portal

      if (webmapItemData === undefined) {

        this._basemapLayers = [];

        this._operLayers = [];

        this._tables = [];

      } else {

        if (webmapItemData.baseMap !== undefined) {

          this._basemapLayers = webmapItemData.baseMap.baseMapLayers;

        } else {

          webmapItemData.baseMap = {};

        }

        this._operLayers = webmapItemData.operationalLayers;

        this._tables = webmapItemData.tables;

        //先设置为数组

        if (this._operLayers === null) {

          this._operLayers = [];

        }

        if (this._basemapLayers === null) {

          this._basemapLayers = [];

        }

        if (this._tables === null) {

          this._tables = [];

        }

        //设置webmapitemdata绑定

        webmapItemData.baseMap.baseMapLayers = this._basemapLayers;

        webmapItemData.operationalLayers = this._operLayers;

        webmapItemData.tables = this._tables;

      }









      this.map = map;

      this._initLayerInfos();

      this._initBasemapLayerInfos();

      this._initTablesInfos();

      this.update();

      this._bindEvents();

    },

8、修改完成