ArcGIS api for JavaScript 4+版本图例控件(Legend)

简介

4+版本的legend widget现在只支持featurelayer的图例呈现了,而此处的图例控件则支持远程dynamicLayer的图例。

代码如下

custom.js

·define([
"../core/Accessor"
], function (accessor) {

var Custom = accessor.createSubclass({
    debounce: function (func, wait, immediate) {
        var timeout, args, context, timestamp, result;
        return function () {
            context = this;
            args = arguments;
            timestamp = new Date();
            var later = function () {
                var last = (new Date()) - timestamp;
                if (last < wait) {
                    timeout = setTimeout(later, wait - last);
                } else {
                    timeout = null;
                    if (!immediate) result = func.apply(context, args);
                }
            };
            var callNow = immediate && !timeout;
            if (!timeout) {
                timeout = setTimeout(later, wait);
            }
            if (callNow) result = func.apply(context, args);
            return result;
        };
    }
});
return Custom;

})·

RemoteLegend.js

·define([
"./Custom",
], function (Custom) {
'use strict';

var _tpl = dojo.string.substitute;

var ROOTTEMPLATE = '
${content}
'; var ITEMTEMPLATE = '
${content}
'; var TITLETEMPLATE = '
${title}
'; var SUBLAYERTEMPLATE = '
${content}
'; var LABELTEMPLATE = '
${layerName}
'; var LEGENDTEMPLATE = '' + '' + '' + '' + '' + '' + '' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '${label}' + '
' + '
'; var RemoteLegend = Custom.createSubclass({ declaredClass: "esri.custom._RemoteLegend", normalizeCtorArgs: function (view, options) { options || (options = {}); this._mapView = view; this._containerId = options.containerId; this._layers = options.layers; if (!this._containerId) { console.error('未传入containerId'); return; } var layerInfos = this._layerInfos = this._generateLayerInfos(); this._generateLayerRender(this._layerInfos); this._registerEvents(); }, _registerEvents: function () { var me = this; this.handlers = [this._mapView.watch('scale', this.debounce(function () { me._generateLayerRender(me._layerInfos); }, 100))]; }, _generateLayerInfos: function () { var me = this; var layers = dojo.filter(this._mapView.map.allLayers.items, function (layer) { return layer.allSublayers; }); if (this._layers) { var layerIds = dojo.map(this._layers, function (layer) { return layer.id; }); layers = dojo.filter(layers, function (layer) { var index = dojo.indexOf(layerIds, layer.id) if (index > -1) { me._layers[index].title && (layer.title = me._layers[index].title); return true; } return false; }); } return layers; }, _generateLayerRender: function (layers) { var me = this; this.layerCache || (this.layerCache = {}); dojo.query('#' + me._containerId).empty(); dojo.forEach(layers, function (layer) { if (layer.url) { if (me.layerCache[layer.url]) { var html = me._generateHtml(me.layerCache[layer.url], layer); dojo.query('#' + me._containerId).addContent(html); } else { dojo.io.script.get({ url: layer.url + '/legend?f=json', callbackParamName: 'callback' }).then(function (resp) { me.layerCache[layer.url] = resp.layers; var html = me._generateHtml(resp.layers, layer); dojo.query('#' + me._containerId).addContent(html); }); } } }); }, _generateHtml: function (layers, layer) { var me = this; var content = ''; var currScale = this._mapView.scale; dojo.forEach(layers, function (l) { if (l.maxScale && currScale < l.maxScale) { return; } if (l.minScale && currScale > l.minScale) { return; } var sublayerLabelContent = _tpl(LABELTEMPLATE, l); var legendHtml = ''; dojo.forEach(l.legend, function (legend) { legendHtml += _tpl(LEGENDTEMPLATE, legend); }); content += _tpl(SUBLAYERTEMPLATE, { content: sublayerLabelContent + legendHtml }); }); var titleHtml = _tpl(TITLETEMPLATE, layer); return _tpl(ITEMTEMPLATE, { content: titleHtml + content }); }, destroy: function () { dojo.forEach(this.handlers,function(handler){ handler.remove(); }); } }); return RemoteLegend;

});·

你可能感兴趣的:(ArcGIS api for JavaScript 4+版本图例控件(Legend))