前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高质量编码-小区用水量专题地图

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

原创
作者头像
MiaoGIS
修改2019-05-29 17:53:20
5790
修改2019-05-29 17:53:20
举报
文章被收录于专栏:Python in AI-IOT

UI交互HTML代码:

代码语言:html
复制
                <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>

代码语言:html
复制
                <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>

JS 代码如下,对应鼠标移至对应区间图例上地图相应小区高亮显示以及点击生成专题图:

代码语言:javascript
复制
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['小区']);
        });

    });
 
}

这里classBreaksRendererLayer函数用于对图层进行分类间隔专题渲染,以及deRenderLayer函数用于清除专题渲染。

代码语言:javascript
复制
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();

}
代码语言:javascript
复制
function deRenderLayer(featureLayer) {

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

}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档