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格式太大,下一遍博客奉上:
运行效果如下图所示: