/**
|
* @name Table of Contents (TOC) widget for ArcGIS Server JavaScript API
|
* @author: Nianwei Liu
|
* @fileoverview
|
* <p>A TOC (Table of Contents) widget for ESRI ArcGIS Server JavaScript API. The namespace is <code>agsjs</code></p>
|
*/
|
// change log:
|
// 2015-01-15: Handle Esri REST API bug: annotation layer's sublayer; JS API workaround: invoked both load and error call back in same request.
|
// 2014-09-24: handle uniquevaluerender's attributeField as function not string.
|
// 2014-09-02: added support of scale dependency for feature layer.
|
// 2014-04-08: in sample: js API 3.8, added handle node check event
|
// 2014-04-04: fire event 'toc-node-checked' (classic onTOCNodeChecked) on click on check box. {rootLayer,serviceLayer, checked}
|
// 2013-10-17: TOC.on('load') event style, clean up src and sample AMD style, JSAPI 3.7.
|
// 2013-09-23: Secure service support: Integrated Windows, Token, or via Proxy (IWA or Token); listen to rootLayer onLoad if not already loaded.
|
// 2013-09-05: JSAPI 3.6. Treat root FeatureLayer same as a layer inside a map service, i.e. move the symbol inline if there is only one symbol.
|
// 2013-08-05: nested groups fix, findTOCNode, onLoad event, css change to a new folder and in sample, added autoToggle option
|
// 2013-07-24: FeatureLayer, JSAPI3.5, removed a few functionalities: uniqueValueRenderer generated checkboxes; dynamically created layer from TOC config.
|
// 2012-08-21: fix dojo.fx load that caused IE has to refresh to see TOC.
|
// 2012-07-26: add ready so it works with compact built (missing dijit._Widget, dijit._Templated).
|
// 2012-07-23: sync and honor setVisibleLayers.
|
// 2012-07-19: xdomain build
|
// 2012-07-18: upgrade to JSAPI v3.0
|
// 2012-02-02: fix IE7&8 problem when there is "all other value"(default symbol)
|
// 2011-12-20: refresh method
|
// 2011-11-04: v1.06: uniquevalue renderer check on/off using definitions. group layer on/off. change css class name. inline style as default. deprecate standard style
|
// 2011-08-11: support for not showing legend or layer list; slider at service level config; removed style background.
|
|
/*global dojo esri*/
|
|
// reference: http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html
|
|
define("agsjs/dijit/TOC", ['dojo/_base/declare', "dojo/has", "dojo/aspect", "dojo/_base/lang", "dojo/_base/array", "dojo/dom-construct", "dojo/dom-class", "dojo/dom-style", "dojo/dom-attr", 'dijit/_Widget', 'dijit/_Templated', 'dojo/Evented', 'dojox/gfx', 'dojo/fx', 'dojo/fx/Toggler', "esri/symbols/jsonUtils", "esri/geometry/scaleUtils", "esri/config", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/_base/sniff"], function(declare, has, aspect, lang, array, domConstruct, domClass, domStyle, domAttr, _Widget, _Templated, Evented, gfx, coreFx, Toggler, jsonUtils, scaleUtils, esriConfig, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer){
|
|
/**
|
* _TOCNode is a node, with 3 possible types: root layer|serviceLayer|legend
|
* @private
|
*/
|
var _TOCNode = declare([_Widget, _Templated], {
|
templateString: '<div class="agsjsTOCNode">' +
|
'<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick">' +
|
'<span data-dojo-attach-point="contentNode" class="agsjsTOCContent">' +
|
'<span data-dojo-attach-point="checkContainerNode"></span>' +
|
'<img src="${_blankGif}" alt="" data-dojo-attach-point="iconNode" />' +
|
'<span data-dojo-attach-point="labelNode">' +
|
'</span></span></div>' +
|
'<div data-dojo-attach-point="containerNode" style="display: none;"> </div></div>',
|
// each node contains reference to rootLayer, servierLayer(layer within service), legend
|
// the reason not to use a "type" property is because in the case of legend, it is necessary
|
// to access meta data of the serviceLayer and rootLayer as well.
|
rootLayer: null,
|
serviceLayer: null,
|
legend: null,
|
rootLayerTOC: null,
|
data: null, // could be one of rootLayer, serviceLayer, or legend
|
_childTOCNodes: [],
|
constructor: function(params, srcNodeRef){
|
lang.mixin(this, params);
|
},
|
// extension point. called automatically after widget DOM ready.
|
postCreate: function(){
|
domStyle.set(this.rowNode, 'paddingLeft', '' + this.rootLayerTOC.tocWidget.indentSize * this.rootLayerTOC._currentIndent + 'px');
|
// using the availability of certain property to decide what kind of node to create.
|
// priority is legend/serviceLayer/rootLayer
|
this.data = this.legend || this.serviceLayer || this.rootLayer;
|
this.blank = this.iconNode.src;
|
if (this.legend) {
|
this._createLegendNode(this.legend);
|
} else if (this.serviceLayer) {
|
this._createServiceLayerNode(this.serviceLayer);
|
} else if (this.rootLayer) {
|
this._createRootLayerNode(this.rootLayer);
|
}
|
if (this.containerNode && Toggler) {
|
// if containerNode was not removed, it means this is some sort of group.
|
this.toggler = new Toggler({
|
node: this.containerNode,
|
showFunc: coreFx.wipeIn,
|
hideFunc: coreFx.wipeOut
|
})
|
}
|
if (!this._noCheckNode) {
|
// typically _noCheckNode means it is a tiledlayer, or legend item that should not have a checkbox
|
var chk;
|
//2013-10-17: do not want to load dijit form in this widget,
|
//but seems no good way to check if it is already been loaded by external code
|
// using AMD style without rely on classic dijit namespace.
|
// maybe will require TOC constructor explicitly set if want to plain HTML checkbox or dijit.form.CheckBox
|
if (dijit.form && dijit.form.CheckBox) {
|
chk = new dijit.form.CheckBox({ // looks a bug in dijit. image not renderered until mouse over. bug was closed but still exist.
|
// use attr('checked', true) not working either.
|
checked: this.data.visible
|
});
|
chk.placeAt(this.checkContainerNode);
|
chk.startup();
|
} else {
|
chk = domConstruct.create('input', {
|
type: 'checkbox',
|
checked: this.data.visible
|
}, this.checkContainerNode);
|
}
|
this.checkNode = chk;
|
}
|
var showChildren = this.data.visible;
|
// if it is a group layer and no child layer is visible, then collapse
|
if (this.data._subLayerInfos) {
|
var noneVisible = true;
|
array.every(this.data._subLayerInfos, function(info){
|
if (info.visible) {
|
noneVisible = false;
|
return false;
|
}
|
return true;
|
});
|
if (noneVisible)
|
showChildren = false;
|
}
|
if (this.data.collapsed)
|
showChildren = false;
|
if (this.iconNode && this.iconNode.src == this.blank) {
|
domClass.add(this.iconNode, 'dijitTreeExpando');
|
domClass.add(this.iconNode, showChildren ? 'dijitTreeExpandoOpened' : 'dijitTreeExpandoClosed');
|
}
|
if (this.iconNode) {
|
domClass.add(this.iconNode, 'agsjsTOCIcon');
|
}
|
if (this.containerNode) {
|
domStyle.set(this.containerNode, 'display', showChildren ? 'block' : 'none');
|
}
|
this.domNode.id = 'TOCNode_' + this.rootLayer.id + (this.serviceLayer ? '_' + this.serviceLayer.id : '') + (this.legend ? '_' + this.legend.id : '');
|
},
|
// root level node, layers directly under esri.Map
|
_createRootLayerNode: function(rootLayer){
|
domClass.add(this.rowNode, 'agsjsTOCRootLayer');
|
domClass.add(this.labelNode, 'agsjsTOCRootLayerLabel');
|
var title = this.rootLayerTOC.config.title;
|
// if it is '' then it means we do not title to be shown, i.e. not indent.
|
if (title === '') {
|
// we do not want to show the first level, typically in the case of a single map service
|
esri.hide(this.rowNode);
|
rootLayer.show();
|
this.rootLayerTOC._currentIndent--;
|
} else if (title === undefined) {
|
// no title is set, try to find default
|
if (rootLayer.name) {
|
// this is a featureLayer
|
title = rootLayer.name;
|
} else {
|
var start = rootLayer.url.toLowerCase().indexOf('/rest/services/');
|
var end = rootLayer.url.toLowerCase().indexOf('/mapserver', start);
|
title = rootLayer.url.substring(start + 15, end);
|
}
|
}
|
rootLayer.collapsed = this.rootLayerTOC.config.collapsed;
|
if (this.rootLayerTOC.config.slider) {
|
this.sliderNode = domConstruct.create('div', {
|
'class': 'agsjsTOCSlider'
|
}, this.rowNode, 'last');//
|
var me = this;
|
require(["dijit/form/HorizontalSlider", "dojo/domReady!"], function(HorizontalSlider){
|
me.slider = new HorizontalSlider({
|
showButtons: false,
|
value: rootLayer.opacity * 100,
|
intermediateChanges: true,
|
//style: "width:100%;padding:0 20px 0 20px",
|
tooltip: 'adjust transparency',
|
onChange: function(value){
|
rootLayer.setOpacity(value / 100);
|
},
|
layoutAlign: 'right'
|
});
|
me.slider.placeAt(me.sliderNode);
|
|
// the new on method lost context compare to the old-good connect.
|
//dojo .connect(rootLayer, 'onOpacityChange', this, function(op){
|
rootLayer.on('opacity-change', function(evt){
|
me.slider.setValue(evt.opacity * 100);
|
});
|
});
|
}
|
if (!this.rootLayerTOC.config.noLegend) {
|
if (rootLayer._tocInfos) {
|
this._createChildrenNodes(rootLayer._tocInfos, 'serviceLayer');
|
} else if (rootLayer.renderer) {
|
// for feature layers
|
var r = rootLayer.renderer;
|
if (r.infos) {
|
//UniqueValueRenderer |ClassBreaksRenderer
|
var legs = r.infos;
|
if (r.defaultSymbol && legs.length > 0 && legs[0].label != '[all other values]') {
|
// insert at top
|
legs.unshift({
|
label: '[all other values]',
|
symbol: r.defaultSymbol
|
})
|
}
|
var af = "";
|
if (typeof r.attributeField == "string"){
|
af = r.attributeField + (r.normalizationField ? '/' + r.normalizationField : '');
|
af += (r.attributeField2 ? '/' + r.attributeField2 : '') + (r.attributeField3 ? '/' + r.attributeField3 : '');
|
}
|
var anode = domConstruct.create('div', {}, this.containerNode);
|
domStyle.set(anode, 'paddingLeft', '' + this.rootLayerTOC.tocWidget.indentSize * (this.rootLayerTOC._currentIndent + 2) + 'px');
|
anode.innerHTML = af;
|
this._createChildrenNodes(legs, 'legend');
|
} else {
|
//this._createChildrenNodes([rootLayer.renderer], 'legend');
|
this._setIconNode(rootLayer.renderer, this.iconNode, this);
|
domConstruct.destroy(this.containerNode);
|
this.containerNode = null;
|
}
|
|
} else {
|
domStyle.set(this.iconNode, 'visibility', 'hidden');
|
}
|
} else {
|
// no legend means no need for plus/minus sign
|
domStyle.set(this.iconNode, 'visibility', 'hidden');
|
}
|
this.labelNode.innerHTML = title;
|
//dojo .attr(this.rowNode, 'title', title);
|
domAttr.set(this.rowNode, 'title', title);
|
},
|
// a layer inside a map service.
|
_createServiceLayerNode: function(serviceLayer){
|
// layer: layerInfo with nested subLayerInfos
|
if (this.rootLayer instanceof (ArcGISDynamicMapServiceLayer)) {
|
this.labelNode.innerHTML = serviceLayer.name;
|
}
|
// 2015-01-15: workaround: ESRI rest API incorrectly returns empty array for annotation layer, which confuses with empty group layer.
|
// was told arcgis.com's TOC also suffered this problem. REST API should fix it.
|
if (serviceLayer._subLayerInfos && serviceLayer._subLayerInfos.length>0) {// group layer
|
domClass.add(this.rowNode, 'agsjsTOCGroupLayer');
|
domClass.add(this.labelNode, 'agsjsTOCGroupLayerLabel');
|
this._createChildrenNodes(serviceLayer._subLayerInfos, 'serviceLayer');
|
} else {
|
domClass.add(this.rowNode, 'agsjsTOCServiceLayer');
|
domClass.add(this.labelNode, 'agsjsTOCServiceLayerLabel');
|
if (this.rootLayer.tileInfo) {
|
// can not check on/off for tiled
|
this._noCheckNode = true;
|
}
|
if (serviceLayer._legends && !this.rootLayerTOC.config.noLegend) {
|
if (serviceLayer._legends.length == 1) {
|
this.iconNode.src = this._getLegendIconUrl(serviceLayer._legends[0]);
|
domConstruct.destroy(this.containerNode);
|
this.containerNode = null;
|
} else {
|
this._createChildrenNodes(serviceLayer._legends, 'legend');
|
}
|
} else {
|
domConstruct.destroy(this.iconNode);
|
this.iconNode = null;
|
domConstruct.destroy(this.containerNode);
|
this.containerNode = null;
|
}
|
}
|
},
|
/*
|
a legend data normally have: {description,label,symbol,value}
|
*/
|
_createLegendNode: function(rendLeg){
|
this._noCheckNode = true;
|
domConstruct.destroy(this.containerNode);
|
domClass.add(this.labelNode, 'agsjsTOCLegendLabel');
|
this._setIconNode(rendLeg, this.iconNode, this);
|
var label = rendLeg.label;
|
if (rendLeg.label === undefined) {
|
if (rendLeg.value !== undefined) {
|
label = rendLeg.value;
|
}
|
if (rendLeg.maxValue !== undefined) {
|
label = '' + rendLeg.minValue + ' - ' + rendLeg.maxValue;
|
}
|
}
|
this.labelNode.appendChild(document.createTextNode(label));
|
},
|
// set url or replace node
|
_setIconNode: function(rendLeg, iconNode, tocNode){
|
var src = this._getLegendIconUrl(rendLeg);
|
if (!src) {
|
if (rendLeg.symbol) {
|
var w = this.rootLayerTOC.tocWidget.swatchSize[0];
|
var h = this.rootLayerTOC.tocWidget.swatchSize[1];
|
if (rendLeg.symbol.width && rendLeg.symbol.height) {
|
w = rendLeg.symbol.width;
|
h = rendLeg.symbol.height;
|
}
|
var node = domConstruct.create('span', {});
|
domStyle.set(node, {
|
'width': w + 'px',
|
'height': h + 'px',
|
'display': 'inline-block'
|
});
|
domConstruct.place(node, iconNode, 'replace');
|
tocNode.iconNode = node;
|
var descriptors = jsonUtils.getShapeDescriptors(rendLeg.symbol);
|
var mySurface = gfx.createSurface(node, w, h);//dojox.
|
if (descriptors) {
|
//if (dojo .isIE) {
|
if (has('ie')) {
|
// 2013076: see http://mail.dojotoolkit.org/pipermail/dojo-interest/2009-December/041404.html
|
window.setTimeout(lang.hitch(this, '_createSymbol', mySurface, descriptors, w, h), 500);
|
} else {
|
this._createSymbol(mySurface, descriptors, w, h);
|
}
|
}
|
} else {
|
if (console)
|
console.log('no symbol in renderer');
|
}
|
} else {
|
iconNode.src = src;
|
if (rendLeg.symbol && rendLeg.symbol.width && rendLeg.symbol.height) {
|
iconNode.style.width = rendLeg.symbol.width;
|
iconNode.style.height = rendLeg.symbol.height;
|
}
|
}
|
},
|
_createSymbol: function(mySurface, descriptors, w, h){
|
var shape = mySurface.createShape(descriptors.defaultShape);
|
if (descriptors.fill) {
|
shape.setFill(descriptors.fill);
|
}
|
if (descriptors.stroke) {
|
shape.setStroke(descriptors.stroke);
|
}
|
shape.applyTransform({
|
dx: w / 2,
|
dy: h / 2
|
});
|
},
|
_getLegendIconUrl: function(legend){
|
var src = legend.url;
|
// in some cases NULL value may cause #legend != #of renderer entry.
|
if (src != null && src.indexOf('data') == -1) {
|
if (!has('ie') && legend.imageData && legend.imageData.length > 0) {
|
src = "data:image/png;base64," + legend.imageData;
|
} else {
|
if (src.indexOf('http') !== 0) {
|
// resolve relative url
|
src = this.rootLayer.url + '/' + this.serviceLayer.id + '/images/' + src;
|
}
|
if (this.rootLayer.credential && this.rootLayer.credential.token) {
|
src = src + "?token=" + this.rootLayer.credential.token;
|
} else if (esriConfig.defaults.io.alwaysUseProxy) {
|
src = esriConfig.defaults.io.proxyUrl + "?" + src;
|
}
|
}
|
}
|
return src;
|
},
|
/**
|
* Create children nodes, for serviceLayers, subLayers of a group layer, or legends within a serviceLayer.
|
* @param {Object} chdn children nodes data
|
* @param {Object} type rootLayer|serviceLayer|legend. It's name will be passed in constructor of _TOCNode.
|
*/
|
_createChildrenNodes: function(chdn, type){
|
this.rootLayerTOC._currentIndent++;
|
var c = [];
|
for (var i = 0, n = chdn.length; i < n; i++) {
|
var chd = chdn[i];
|
var params = {
|
rootLayerTOC: this.rootLayerTOC,
|
rootLayer: this.rootLayer,
|
serviceLayer: this.serviceLayer,
|
legend: this.legend
|
};
|
params[type] = chd;
|
params.data = chd;
|
//var node = new agsjs.dijit._TOCNode(params);
|
if (type == 'legend') {
|
chd.id = 'legend' + i;
|
}
|
var node = new _TOCNode(params);
|
node.placeAt(this.containerNode);
|
c.push(node);
|
}
|
this._childTOCNodes = c; // for refreshTOC use recursively.
|
this.rootLayerTOC._currentIndent--;
|
},
|
_toggleContainer: function(o){
|
if (domClass.contains(this.iconNode, 'dijitTreeExpandoClosed') ||
|
domClass.contains(this.iconNode, 'dijitTreeExpandoOpened')) {
|
// make sure its not clicked on legend swatch
|
if (o) {
|
domClass.remove(this.iconNode, 'dijitTreeExpandoClosed');
|
domClass.add(this.iconNode, 'dijitTreeExpandoOpened');
|
} else if (o === false) {
|
domClass.remove(this.iconNode, 'dijitTreeExpandoOpened');
|
domClass.add(this.iconNode, 'dijitTreeExpandoClosed');
|
} else {
|
domClass.toggle(this.iconNode, 'dijitTreeExpandoClosed');
|
domClass.toggle(this.iconNode, 'dijitTreeExpandoOpened');
|
}
|
if (domClass.contains(this.iconNode, 'dijitTreeExpandoOpened')) {
|
if (this.toggler) {
|
this.toggler.show();
|
} else {
|
esri.show(this.containerNode);
|
}
|
} else {
|
if (this.toggler) {
|
this.toggler.hide();
|
} else {
|
esri.hide(this.containerNode);
|
}
|
}
|
// remember it's state for refresh
|
if (this.rootLayer && !this.serviceLayer && !this.legend) {
|
this.rootLayerTOC.config.collapsed = domClass.contains(this.iconNode, 'dijitTreeExpandoClosed');
|
}
|
}
|
},
|
/**
|
* Expand the node's children if applicable
|
*/
|
expand: function(){
|
this._toggleContainer(true);
|
},
|
/**
|
* collapse the node's children if applicable
|
*/
|
collapse: function(){
|
this._toggleContainer(false);
|
},
|
/**
|
* Show the TOC Node
|
*/
|
show: function(){
|
esri.show(this.domNode);
|
},
|
/** Hide TOC node
|
*
|
*/
|
hide: function(){
|
esri.hide(this.domNode);
|
},
|
// change UI according to the state of map layers.
|
_adjustToState: function(){
|
if (this.checkNode) {
|
var checked = this.legend ? this.legend.visible : this.serviceLayer ? this.serviceLayer.visible : this.rootLayer ? this.rootLayer.visible : false;
|
if (this.checkNode.set) {
|
//checkNode is a dojo .forms.CheckBox
|
this.checkNode.set('checked', checked);
|
} else {
|
// checkNode is a simple HTML element.
|
this.checkNode.checked = checked;
|
}
|
// 2014-04-08: automatically expand/collapse?
|
if (this.rootLayerTOC.config.autoToggle !== false) {
|
this._toggleContainer(this.checkNode && this.checkNode.checked);
|
}
|
}
|
//20140902: handle out of scale for feature layer
|
var scale = scaleUtils.getScale(this.rootLayerTOC.tocWidget.map);//esri.geometry
|
var outScale = false;
|
if (this.serviceLayer) {
|
outScale = (this.serviceLayer.maxScale != 0 && scale < this.serviceLayer.maxScale) || (this.serviceLayer.minScale != 0 && scale > this.serviceLayer.minScale);
|
} else if (this.rootLayer.renderer) {
|
// this is a feature layer
|
outScale = (this.rootLayer.maxScale != 0 && scale < this.rootLayer.maxScale) || (this.rootLayer.minScale != 0 && scale > this.rootLayer.minScale);
|
}
|
if (outScale) {
|
domClass.add(this.domNode, 'agsjsTOCOutOfScale');
|
} else {
|
domClass.remove(this.domNode, 'agsjsTOCOutOfScale');
|
}
|
if (this.checkNode) {
|
if (this.checkNode.set) {
|
this.checkNode.set('disabled', outScale);
|
} else {
|
this.checkNode.disabled = outScale;
|
}
|
}
|
|
if (this._childTOCNodes.length > 0) {
|
array.forEach(this._childTOCNodes, function(child){
|
child._adjustToState();
|
});
|
}
|
},
|
_onClick: function(evt){
|
var t = evt.target;
|
var lay;
|
if (t == this.checkNode || dijit.getEnclosingWidget(t) == this.checkNode) {
|
// 2013-07-23: remove this most complex checkable legend functionality to simplify the widget
|
if (this.serviceLayer) {
|
this.serviceLayer.visible = this.checkNode && this.checkNode.checked;
|
// if a sublayer is checked on, force it's group layer to be on.
|
// 2013-08-01 handler multiple level of groups
|
if (this.serviceLayer.visible) {
|
lay = this.serviceLayer;
|
while (lay._parentLayerInfo) {
|
if (!lay._parentLayerInfo.visible) {
|
lay._parentLayerInfo.visible = true;
|
}
|
lay = lay._parentLayerInfo;
|
}
|
}
|
// if a layer is on, it's service must be on.
|
if (this.serviceLayer.visible && !this.rootLayer.visible) {
|
this.rootLayer.show();
|
}
|
if (this.serviceLayer._subLayerInfos) {
|
// this is a group layer;
|
// 2013-08-01 handler multiple level of groups
|
this._setSubLayerVisibilitiesFromGroup(this.serviceLayer);
|
}
|
/* 2013-07-23: do not deal with checkbox legend any more.*/
|
this.rootLayer.setVisibleLayers(this._getVisibleLayers(), true);
|
this.rootLayerTOC._refreshLayer();
|
} else if (this.rootLayer) {
|
this.rootLayer.setVisibility(this.checkNode && this.checkNode.checked);
|
}
|
// 2014-04-04: emit event with infomation about the root layer, service layer, and on/off
|
/**
|
* @event
|
*/
|
this.rootLayerTOC.tocWidget.emit('toc-node-checked', {
|
rootLayer: this.rootLayer,
|
serviceLayer: this.serviceLayer,
|
checked: this.checkNode.checked
|
});
|
// classic style.
|
this.rootLayerTOC.tocWidget.onTOCNodeChecked(this.rootLayer, this.serviceLayer, this.checkNode.checked);
|
// automatically expand/collapse?
|
if (this.rootLayerTOC.config.autoToggle !== false) {
|
this._toggleContainer(this.checkNode && this.checkNode.checked);
|
}
|
this.rootLayerTOC._adjustToState();
|
|
} else if (t == this.iconNode) {
|
this._toggleContainer();
|
}
|
},
|
_setSubLayerVisibilitiesFromGroup: function(lay){
|
if (lay._subLayerInfos && lay._subLayerInfos.length > 0) {
|
array.forEach(lay._subLayerInfos, function(info){
|
info.visible = lay.visible;
|
if (info._subLayerInfos && info._subLayerInfos.length > 0) {
|
this._setSubLayerVisibilitiesFromGroup(info);
|
}
|
}, this);
|
}
|
},
|
_getVisibleLayers: function(){
|
var vis = [];
|
array.forEach(this.rootLayer.layerInfos, function(layerInfo){
|
if (layerInfo.subLayerIds) {
|
// if a group layer is set to vis, all sub layer will be drawn regardless it's sublayer status
|
return;
|
} else if (layerInfo.visible) {
|
vis.push(layerInfo.id);
|
}
|
});
|
if (vis.length === 0) {
|
vis.push(-1);
|
} else if (!this.rootLayer.visible) {
|
this.rootLayer.show();
|
}
|
return vis;
|
},
|
_findTOCNode: function(layerId){
|
if (this.serviceLayer && this.serviceLayer.id == layerId) {
|
return this;
|
}
|
if (this._childTOCNodes.length > 0) {
|
var n = null;
|
for (var i = 0, c = this._childTOCNodes.length; i < c; i++) {
|
n = this._childTOCNodes[i]._findTOCNode(layerId);
|
if (n)
|
return n;
|
}
|
}
|
return null;
|
}
|
});
|
|
var _RootLayerTOC = declare([_Widget], {
|
_currentIndent: 0,
|
rootLayer: null,
|
tocWidget: null,
|
/**
|
*
|
* @param {Object} params: noLegend: true|false, collapsed: true|false, slider: true|false
|
* @param {Object} srcNodeRef
|
*/
|
constructor: function(params, srcNodeRef){
|
this.config = params.config || {};
|
this.rootLayer = params.config.layer;
|
this.tocWidget = params.tocWidget;
|
|
},
|
// extenstion point called by framework
|
postCreate: function(){
|
if ((this.rootLayer instanceof (ArcGISDynamicMapServiceLayer) ||
|
this.rootLayer instanceof (ArcGISTiledMapServiceLayer))) {
|
if (this._legendResponse) {
|
this._createRootLayerTOC();
|
} else {
|
this._getLegendInfo();
|
}
|
} else {
|
this._createRootLayerTOC();
|
}
|
},
|
|
_getLegendInfo: function(){
|
|
var url = '';
|
if (this.rootLayer.version >= 10.01) {
|
url = this.rootLayer.url + '/legend';
|
} else {
|
url = 'http://www.arcgis.com/sharing/tools/legend';
|
var i = this.rootLayer.url.toLowerCase().indexOf('/rest/');
|
var soap = this.rootLayer.url.substring(0, i) + this.rootLayer.url.substring(i + 5);
|
url = url + '?soapUrl=' + escape(soap);
|
}
|
var handle = esri.request({
|
url: url,
|
content: {
|
f: "json"
|
},
|
callbackParamName: 'callback',
|
handleAs: 'json',
|
load: lang.hitch(this, this._processLegendInfo),
|
error: lang.hitch(this, this._processLegendError)
|
});
|
|
},
|
_processLegendError: function(err){
|
// 2015-01-01: workaround: In some cases ESRI JSAPI will call load and error handler in same request, resulted in double entry in TOC.
|
// This change surpress one. JS API should fix to make sure either load or error is called but not both.
|
if (console) console.log("esri.request error callback. Is this error legit?");
|
if (!this._legendResponse) this._createRootLayerTOC();
|
},
|
_processLegendInfo: function(json){
|
this._legendResponse = json;
|
var layer = this.rootLayer;
|
if (!layer._tocInfos) {
|
// create a lookup map, key=layerId, value=LayerInfo
|
// generally id = index, this is to assure we find the right layer by ID
|
// note: not all layers have an entry in legend response.
|
var layerLookup = {};
|
array.forEach(layer.layerInfos, function(layerInfo){
|
layerLookup['' + layerInfo.id] = layerInfo;
|
// used for later reference.
|
layerInfo.visible = layerInfo.defaultVisibility;
|
if (layer.visibleLayers && !layerInfo.subLayerIds) {
|
if (array.indexOf(layer.visibleLayers, layerInfo.id) == -1) {
|
layerInfo.visible = false;
|
} else {
|
layerInfo.visible = true;
|
}
|
}
|
});
|
// attached legend Info to layer info
|
if (json.layers) {
|
array.forEach(json.layers, function(legInfo){
|
var layerInfo = layerLookup['' + legInfo.layerId];
|
if (layerInfo && legInfo.legend) {
|
layerInfo._legends = legInfo.legend;
|
}
|
});
|
}
|
// nest layer Infos
|
array.forEach(layer.layerInfos, function(layerInfo){
|
if (layerInfo.subLayerIds) {
|
var subLayerInfos = [];
|
array.forEach(layerInfo.subLayerIds, function(id, i){
|
subLayerInfos[i] = layerLookup[id];
|
subLayerInfos[i]._parentLayerInfo = layerInfo;
|
});
|
layerInfo._subLayerInfos = subLayerInfos;
|
}
|
});
|
//2012-07-21: if setVisibility is called before this widget is built, we want to use the actual visibility instead of the layerInfo.
|
|
//finalize the tree structure in _tocInfos, skipping all sublayers because they were nested already.
|
var tocInfos = [];
|
array.forEach(layer.layerInfos, function(layerInfo){
|
if (layerInfo.parentLayerId == -1) {
|
tocInfos.push(layerInfo);
|
}
|
});
|
layer._tocInfos = tocInfos;
|
}
|
this._createRootLayerTOC();
|
},
|
_createRootLayerTOC: function(){
|
|
// sometimes IE may fail next step
|
///this._rootLayerNode = new agsjs.dijit._TOCNode({
|
if (this.rootLayer.loaded) {
|
this._rootLayerNode = new _TOCNode({
|
rootLayerTOC: this,
|
rootLayer: this.rootLayer
|
});
|
this._rootLayerNode.placeAt(this.domNode);
|
//this._visHandler = dojo .connect(this.rootLayer, "onVisibilityChange", this, "_adjustToState");
|
this._visHandler = this.rootLayer.on("visibility-change", lang.hitch(this, this._adjustToState));
|
// this will make sure all TOC linked to a Map synchronized.
|
if (this.rootLayer instanceof (ArcGISDynamicMapServiceLayer)) {
|
// this._visLayerHandler = dojo .connect(this.rootLayer, "setVisibleLayers", this, "_onSetVisibleLayers");
|
// 2013-10-17: in AMD aspect is used to replace connect to regular method, use recieveArgs=true to avoid argument shift and hitch to keep scope.
|
this._visLayerHandler = aspect.after(this.rootLayer, "setVisibleLayers", lang.hitch(this, this._onSetVisibleLayers), true);
|
}
|
this._adjustToState();
|
this._loaded = true;
|
this.onLoad();
|
} else {
|
//dojo .connect(this.rootLayer, 'onLoad', dojo .hitch(this, this._createRootLayerTOC));
|
this.rootLayer.on('load', lang.hitch(this, this._createRootLayerTOC));
|
}
|
|
},
|
/**
|
* @event
|
*/
|
onLoad: function(){
|
},
|
|
_refreshLayer: function(){
|
var rootLayer = this.rootLayer;
|
var timeout = this.tocWidget.refreshDelay;
|
if (this._refreshTimer) {
|
window.clearTimeout(this._refreshTimer);
|
this._refreshTimer = null;
|
}
|
this._refreshTimer = window.setTimeout(function(){
|
rootLayer.setVisibleLayers(rootLayer.visibleLayers);
|
}, timeout);
|
},
|
_onSetVisibleLayers: function(visLayers, doNotRefresh){
|
// 2012-07-23:
|
// set the actual individual layerInfo's visibility after service's setVisibility call.
|
if (!doNotRefresh) {
|
array.forEach(this.rootLayer.layerInfos, function(layerInfo){
|
if (array.indexOf(visLayers, layerInfo.id) != -1) {
|
layerInfo.visible = true;
|
} else if (!layerInfo._subLayerInfos) {
|
layerInfo.visible = false;
|
}
|
});
|
this._adjustToState();
|
}
|
},
|
_adjustToState: function(){
|
this._rootLayerNode._adjustToState();
|
},
|
destroy: function(){
|
if (this._visHandler) {
|
this._visHandler.remove();
|
this._visHandler = null;
|
}
|
if (this._visLayerHandler) {
|
this._visLayerHandler.remove();
|
this._visLayerHandler = null;
|
}
|
|
}
|
});
|
|
var TOC = declare("agsjs.dijit.TOC", [_Widget, Evented], {
|
indentSize: 18,
|
swatchSize: [30, 30],
|
refreshDelay: 500,
|
layerInfos: null,
|
|
/**
|
* @name TOCLayerInfo
|
* @class This is an object literal that specify the options for each map rootLayer layer.
|
* @property {Layer} [layer] ArcGIS Server layer.
|
* @property {string} [title] title. optional. If not specified, rootLayer name is used.
|
* @property {Boolean} [slider] whether to show slider for each rootLayer to adjust transparency. default is false.
|
* @property {Boolean} [noLegend] whether to skip the legend, and only display layers. default is false.
|
* @property {Boolean} [collapsed] whether to collapsed the rootLayer layer at beginning. default is false, which means expand if visible, collapse if not.
|
* @property {Boolean} [suppressGroup] whether to supress the automatic action regarding groups: sync parent/child layer status.
|
*
|
*/
|
/**
|
* @name TOCOptions
|
* @class This is an object literal that specify the option to construct a {@link TOC}.
|
* @property {esri.Map} [map] the map instance. required.
|
* @property {Object[]} [layerInfos] a subset of layers in the map to show in TOC. each object is a {@link TOCLayerInfo}
|
* @property {Number} [indentSize] indent size of tree nodes. default to 18.
|
*/
|
/**
|
* Create a Table Of Contents (TOC)
|
* @name TOC
|
* @constructor
|
* @class This class is a Table Of Content widget.
|
* @param {ags.TOCOptions} opts
|
* @param {DOMNode|id} srcNodeRef
|
*/
|
constructor: function(params, srcNodeRef){
|
params = params || {};
|
if (!params.map) {
|
throw new Error('no map defined in params for TOC');
|
}
|
this.layerInfos = params.layerInfos;
|
this.indentSize = params.indentSize || 18;
|
|
lang.mixin(this, params);
|
},
|
// extension point
|
postCreate: function(){
|
this._createTOC();
|
},
|
/** @event the widget DOM is loaded
|
*
|
*/
|
onLoad: function(){
|
},
|
/**@event
|
*
|
*/
|
onTOCNodeChecked: function(rootLayer, serviceLayer, checked){
|
},
|
|
_createTOC: function(){
|
domConstruct.empty(this.domNode);
|
this._rootLayerTOCs = [];
|
for (var i = 0, c = this.layerInfos.length; i < c; i++) {
|
// attach a title to rootLayer layer itself
|
var info = this.layerInfos[i];
|
///var rootLayerTOC = new agsjs.dijit._RootLayerTOC({
|
var rootLayerTOC = new _RootLayerTOC({
|
config: info,
|
tocWidget: this
|
});
|
this._rootLayerTOCs.push(rootLayerTOC);
|
this._checkLoadHandler = rootLayerTOC.on('load', lang.hitch(this, '_checkLoad'));//dojo .connect(rootLayerTOC, 'onLoad', this, '_checkLoad');
|
rootLayerTOC.placeAt(this.domNode);
|
this._checkLoad();
|
}
|
if (!this._zoomHandler) {
|
this._zoomHandler = this.map.on('zoom-end', lang.hitch(this, "_adjustToState"));
|
}
|
},
|
_checkLoad: function(){
|
var loaded = true;
|
array.every(this._rootLayerTOCs, function(widget){
|
if (!widget._loaded) {
|
loaded = false;
|
return false;
|
}
|
return true;
|
});
|
if (loaded) {
|
this.onLoad();
|
this.emit('load');
|
}
|
},
|
_adjustToState: function(){
|
array.forEach(this._rootLayerTOCs, function(widget){
|
widget._adjustToState();
|
});
|
},
|
/**
|
* Refresh the TOC to reflect
|
*/
|
refresh: function(){
|
this._createTOC();
|
},
|
destroy: function(){
|
this._zoomHandler.remove();
|
this._zoomHandler = null;
|
this._checkLoadHandler.remove();
|
this._checkLoadHandler = null;
|
},
|
/**
|
* Find the TOC Node based on root layer and optional serviceLayer ID.
|
* @param {Object} layer root Layer of a map
|
* @param {Object} serviceLayerId id of a ArcGIS Map Service Layer
|
* @return {TOCNode} TOC node, it has public methods: collapse, expand, show, hide
|
*/
|
findTOCNode: function(layer, serviceLayerId){
|
var w;
|
array.every(this._rootLayerTOCs, function(widget){
|
if (widget.rootLayer == layer) {
|
w = widget;
|
return false;
|
}
|
return true;
|
});
|
if (serviceLayerId !== null && serviceLayerId !== undefined && w.rootLayer instanceof (ArcGISDynamicMapServiceLayer)) {
|
return w._rootLayerNode._findTOCNode(serviceLayerId);
|
} else if (w) {
|
return w._rootLayerNode;
|
}
|
return null;
|
}
|
});
|
return TOC;
|
|
});
|
