ArcGIS Web Appbuilder代码改动为不需要portal步骤初探

ArcGIS WEB AppBuilder下载的代码更改为不依赖portal初探

ArcGIS Web AppBuilder是用于快速构建基于HTML5/Javascript的美观的Web应用的一个工具。因使用其搭建应用具有快速、高效、灵活、美观的特性，因此ArcGIS WebAppBuilder 成为GIS开发人员的一件应用开发的新利器。通过WebApp Builder，开发者能：主题样式开发，图形用户界面定制，自定义Widget，深度源码开发等。

但是由ArcGIS Web AppBuilder构建的应用程序需要依赖portal，在实际应用中，可以利用该框架，搭建不依赖portal的应用，并且，经过改造，还可以将该框架应用于Cesium等项目。

本文档主要改造为不依赖protal的应用程序框架，改动文件主要有：config.json、jimu.js文件夹下的ConfigLoader.js、MapManager.js、LayerInfos/LayerInfos.js文件。

利用ArcGIS Web AppBuilder构建的应用程序框架如下图所示：

 

1、拷贝本地arcgis js for javascript库到框架下（如果在线部署，则跳过此步骤）

将arcgis js库拷贝到libs目录下，如下图所示：

 

目前appbuilder 2.0版本支持arcgisjs 3.系列，对4.系列支持不够好，需要自己更改原始程序，暂不考虑，等appbuilder支持4.系列了重新搭建。

我用的版本是3.21.

Arcgis js api部署更改参考网上，主要是更改init.js文件和dojo/dojo.js文件，将文件中的内容[HOSTNAME_AND_PATH_TO_JSAPI]替换为实际路径，我替换的路径如下：

baseUrl:(location.protocol=== 'file:'?'http:' :location.protocol) +'//'+ location.host + "/libs/arcgis_js_api_321/dojo"

env.js文件更改

更改apiurl，如下图所示：

 

2、config.json文件更改

为了支持对非portal的支持，在config.json文件中添加属性项" useportal"(设为false表示非portal，其他情况表示portal方式连接)，如下图所示：

同时删除portal相关内容，如portalUrl、itemid等

3、ConfigLoader.js文件改造

为了实现非portal支持，更改loadConfig函数，如下所示：

//添加非portal支持
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();
    }));
}

4、MapManager.js文件改造

（1）添加头文件（应用到的类必须添加头文件）

添加头文件如下图所示：

（2）_showMap函数改造

代码如下：

//添加非portal支持
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.');
}

（3）添加_show2DWebMap_NoPortal函数，该函数基于_show2DWebMap改造，代码如下：

_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._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);
    }));
},

5、LayerInfos/LayerInfos.js文件改造

（1）constructor函数改造

改造代码如下：

constructor: function(map,webmapItemData) {
    this._unreachableLayersTitleOfWebmap= [];
    //改造非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._initTablesInfos();
    this.update();
    //aspect.after(this.map, "onBaseChange",lang.hitch(this, this._onBasemapChange));
    //on(this.map,"basemap-change", lang.hitch(this, this._onBasemapChange));
    //topic.subscribe('publishData',lang.hitch(this, this._onReceiveBasemapGalleryeData));
    this._bindEvents();
},

（2）clazz.getInstance函数改造

代码如下：

//改造非portal
var layerInfos = null;
var webitemdata = null;
if(webmapItemInfo !== undefined)
{
  webitemdata = webmapItemInfo.itemData;
}
layerInfos= new clazz(map, webitemdata);

经过以上更改，即可以添加自己发布的服务图层了，不需要protal也可，但是，与webmap相关的widget需要更改才能使用，需要自己更改，后续，在使用过程中再继续完善。

配置config.json文件：

json格式太大，下一遍博客奉上：

 

运行效果如下图所示：