高质量编码-小区用水量专题地图

                <div class="panel panel-success">
                    <!-- Default panel contents -->
                    <div class="panel-heading">总用水量对比</div>
                    <div class="panel-body" data-role="regionRender" data-field="regionMonthTotal">

                        <div class="progress" data-role="renderBreaks">
                            <div class="progress-bar progress-bar-success level1" style="width: 20%" data-min="0" data-max="1000" data-color="[56, 168, 0, 0.5]">
                                1000吨
                            </div>
                            <div class="progress-bar progress-bar-warning level2" style="width: 20%" data-min="1000" data-max="1500" data-color="[139, 209, 0, 0.5]">
                                1500吨
                            </div>
                            <div class="progress-bar progress-bar-danger level3" style="width: 20%" data-min="1500" data-max="2000" data-color="[255, 255, 0, 0.5]">
                                2000吨
                            </div>
                            <div class="progress-bar progress-bar-danger level4" style="width: 20%" data-min="2000" data-max="2500" data-color="[255, 128, 0, 0.5]">
                                2500吨
                            </div>
                            <div class="progress-bar progress-bar-danger level5" style="width: 20%" data-min="2500" data-max="Infinity" data-color="[255, 0, 0, 0.5]">
                                2500吨以上
                            </div>

                        </div>


                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">
                                生成结果
                            </button>
                            <button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
                                清除结果
                            </button>
                        </div>

                    </div>

                </div>

                <div class="panel panel-danger">
                    <!-- Default panel contents -->
                    <div class="panel-heading">户均用水对比</div>
                    <div class="panel-body" data-role="regionRender">

                        <div class="progress" data-role="renderBreaks" data-field="regionMonthAverage">
                            <div class="progress-bar progress-bar-success level1" style="width: 20%" data-min="0" data-max="100" data-color="[56, 168, 0, 0.5]">
                                100吨
                            </div>
                            <div class="progress-bar progress-bar-warning level2" style="width: 20%" data-min="100" data-max="150" data-color="[139, 209, 0, 0.5]">
                                150吨
                            </div>
                            <div class="progress-bar progress-bar-danger level3" style="width: 20%" data-min="150" data-max="200" data-color="[255, 255, 0, 0.5]">
                                200吨
                            </div>
                            <div class="progress-bar progress-bar-danger level4" style="width: 20%" data-min="200" data-max="250" data-color="[255, 128, 0, 0.5]">
                                250吨
                            </div>
                            <div class="progress-bar progress-bar-danger level5" style="width: 20%" data-min="250" data-max="Infinity" data-color="[255, 0, 0, 0.5]">
                                250吨以上
                            </div>
                        </div>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">
                                生成结果
                            </button>
                            <button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
                                清除结果
                            </button>
                        </div>

                    </div>

                </div>

function initRegionRenderer() {

    $('[data-role=regionRender]').each(function (index, item) {
        var field = $(item).data('field');
        $(item).find('.progress').delegate('.progress-bar', 'mouseenter', function () {
            $(this).addClass('progress-bar-striped').addClass('active');
            var min = parseFloat($(this).data('min'));
            var max = parseFloat($(this).data('max'));
            var color = ($(this).data('color'));
            var FIDs = _.map(dictFeatureLayer['小区'].getLayers()[0].graphics, function (item) {

                var FID = parseKMLAttributes_region(item.attributes)['FID'];
                return FID;
            });
            FIDs = _.filter(FIDs, function (item) {
                return field == "regionMonthTotal" ? mockData1[item] > min && mockData1[item] < max : mockData2[item] > min && mockData2[item] < max
            });

            console.log('mouseenter');
            var clause = {
                'FID': FIDs.map(function (item) {
                    return item.toString();
                })
            };

            var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 255, 0]), 2), new Color([255, 255, 255, 1])
            ).setColor(new Color(color.slice(0, -1).concat([0.8])));

            highlightLayer(dictFeatureLayer['小区'], _.partial(searchFeature, _, clause, {}, parseKMLAttributes_region), highlightSymbol)
        });
        $(item).find('.progress').delegate('.progress-bar', 'mouseleave', function () {
            $(this).removeClass('progress-bar-striped').removeClass('active');
            console.log('mouseleave');
            deHighlightLayer(dictFeatureLayer['小区']);
        });

        var breakConfigs = $(item).find('.progress .progress-bar').map(function (index, item) {
            return {


                'color': new Color($(item).data('color')),
                'min': parseFloat($(item).data('min')),
                'max': parseFloat($(item).data('max'))
            };
        }).toArray();


        $(item).find('button.btn-primary').click(function () {

            colMapFeature.add({
                'name': '小区'
            });

            console.log('render region');
            console.log(breakConfigs);
            console.log(field);
            classBreaksRendererLayer(dictFeatureLayer['小区'], (function (graphic) {
                return randomLevel(graphic, field)
            }), breakConfigs);


        });

        $(item).find('button.btn-default').click(function () {
            deRenderLayer(dictFeatureLayer['小区']);
        });

    });
 
}

function classBreaksRendererLayer(featureLayer, rendererFunc, breakConfigs) {

    var graphicsLayer = toGraphicsLayer(featureLayer);

    var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([110, 110, 110, 1]), 0.5333), new Color([225, 225, 225, 1])
    );

    var renderer = new ClassBreaksRenderer(symbol, rendererFunc);
    _.each(breakConfigs, function (item, index) {
        renderer.addBreak(parseFloat(item['min']), parseFloat(item['max']),

            new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                    new Color([0, 0, 0]), 0.2), new Color(item['color'])
            )
        );
    });

    graphicsLayer.setRenderer(renderer);
    graphicsLayer.refresh();

}

function deRenderLayer(featureLayer) {

    var graphicsLayer = toGraphicsLayer(featureLayer);
    var render = graphicsLayer.renderer;
    render.clearBreaks();
    graphicsLayer.setRenderer(render);
    graphicsLayer.refresh();

}