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、修改完成