iClient对接属性汇总分析

作者:LX

在SuperMap iServer分布式分析服务中,提供了针对海量数据的属性汇总分析功能。本文将介绍如何通过iClient对接分布式分析服务中的属性汇总分析服务并将结果在前端展示。

一、 属性汇总是什么?

分布式分析服务中的属性汇总分析功能指的是对输入的数据集中所选择的属性进行汇总统计。通过对输入的数据集设定分组字段、属性字段以及对属性字段需进行的统计模式,从而得到汇总统计的结果。
以下图为例,按照字段borough进行分组统计,Queens的个数统计结果为5,再从中取得最小的LocationID为2。

源数据:
在这里插入图片描述
属性汇总统计结果:
在这里插入图片描述

二、开发准备

1、搭建分布式分析环境并发布分布式分析服务,参考博客《快速搭建iServer大数据分布式空间分析服务》进行分布式分析环境的搭建以及服务的发布;
2、服务端进行属性汇总分析(验证服务有效性)
1)发布分布式分析服务,然后进入到服务的jobs资源下,选中属性汇总
在这里插入图片描述
2)创建分析任务
在这里插入图片描述在这里插入图片描述
3)分析成功
在这里插入图片描述
3、iClient开发包,可以通过官网地址下载: http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx

三、 iClient 开发代码

SuperMap提供了多个GIS前端开发地图库,我们在这以iClient for Openlayers为例来对接。
1、引入js文件
需要引入openlayers的css和js文件,以及iclient9-openlayers的css,js文件;
我们的iclient包中只需要引入include-openlayers.js就可以加载以上全部文件

<script type="text/javascript" src="http://iclient.supermap.io/dist/openlayers/include-openlayers.js"></script>

2、定义服务url并创建底图

 //分布式分析服务
  var processingsUrl ="http://localhost:8090/iserver/services/distributedanalyst/rest/v1/jobs";
 //地图服务
  var mapURL ="http://localhost:8090/iserver/services/map-world/rest/maps/World";
  var map = new ol.Map({
                target: 'map',
                view: new ol.View({
                    center: [-73.95, 40.75],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            });
   map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: mapURL,
            }),
        }));

3、安全验证

//安全验证
var token=” I5OZZxPYAZIJvL7tCQCZB6qMHrG8hMw0a0hOqvCRlm7sMA_5MyRZSoLZxNbPXHevAvDniCJgtSOiCzx466HPjA..”;
SuperMap.SecurityManager.registerToken(processingsUrl, token);

4、设置属性汇总分析参数

//属性汇总分析参数
 var summaryAttributesJobsParameter = new SuperMap.SummaryAttributesJobsParameter({
       datasetName: "samples_processing_newyorkZone_R",//参与分析的数据集名称
       groupField: "borough",//分组字段
       attributeField: "LocationID",//属性字段
       statisticModes: "min"//统计模式
   });

5、属性汇总分析

//分布式分析服务
var processingService = new ol.supermap.ProcessingService(processingsUrl);
 //执行属性汇总分析
processingService.addSummaryAttributesJob(summaryAttributesJobsParameter, summaryAttributesCompleted);

6、结果展示
分析成功后会把分析结果保存成数据源和工作空间,存储到%iServerRoot%\webapps\iserver\processingResultData目录下,在idesktop打开数据源会看到分析结果如下:
在这里插入图片描述
iServer也会将工作空间发布成iServer服务,我们通过在前端查询服务也可以将结果展示在前端地图上来看,前端显示属性汇总结果如下:
在这里插入图片描述
附上完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_summaryAttributesJobService"></title>
    <script type="text/javascript" include="echarts" src="../../dist/openlayers/include-openlayers.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="width: 100%;height:100%"></div>
    <div id="infoControl" style=" position: absolute;top: 80px;right: 10px;text-align: left;"></div>
    <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "http://iclient.supermap.io";
        var processingsUrl = "http://localhost:8090/iserver/services/distributedanalyst/rest/v1/jobs",
            mapURL = "http://localhost:8090/iserver/services/map-world/rest/maps/World",
            map = new ol.Map({
                target: 'map',
                view: new ol.View({
                    center: [-73.95, 40.75],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            });
        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: mapURL,
            }),
        }));
        //安全验证
        SuperMap.SecurityManager.registerToken(processingsUrl, "I5OZZxPYAZIJvL7tCQCZBxiYOPOK8EZwixXh7nTdlfhJ1_cDuVyoHaA1pgUKEG2vJsjHxX1bRvMAf6l6yqzGug..");
        //属性汇总分析
        analyis();
        function analyis() {
            //属性汇总分析参数
            var summaryAttributesJobsParameter = new SuperMap.SummaryAttributesJobsParameter({
                datasetName: "samples_processing_newyorkZone_R",//参与分析的数据集名称
                groupField: "borough",//分组字段
                attributeField: "LocationID",//属性字段
                statisticModes: "min"//统计模式
            });
            //分布式分析服务
            var processingService = new ol.supermap.ProcessingService(processingsUrl);
            //执行属性汇总分析
            processingService.addSummaryAttributesJob(summaryAttributesJobsParameter, summaryAttributesCompleted);
        };
        //分析成功
        function summaryAttributesCompleted(serviceResult) {

            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
               //获取分析成功发布的服务
                var dataUrl = info.serviceAddress + '/data';
               //sql查询参数
                var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
                    queryParameter: {
                        name: "analystResult@UntitledDatasource",
                        attributeFilter: "SMID > 0"
                    },
                    datasetNames: ["UntitledDatasource:analystResult"]
                });
                //sql查询
                new ol.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam,
                    function (serviceResult) {

                        result = serviceResult.result.features.features;
                        console.log("result", result);
                        var names = [];
                        var data1 = [];
                        var data2 = [];
                        for (var i = 0; i < result.length; i++) {
                            names.push(result[i].properties.BOROUGH);
                            data1.push(parseFloat(result[i].properties.MIN_LOCATIONID));
                            data2.push(parseFloat(result[i].properties.RECORDCOUNT));
                        }
                    //设置echarts图表参数
                        option = {
                            color: ['#003366', '#006699'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            legend: {
                                data: ['MIN_LOCATIONID', 'RECORDCOUNT']
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: names,
                                    axislabel: {
                                        interval: 0
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: 'MIN_LOCATIONID',
                                    type: 'bar',
                                    barGap: 0,
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top'
                                        }
                                    },
                                    data: data1
                                },
                                {
                                    name: 'RECORDCOUNT',
                                    type: 'bar',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top'
                                        }
                                    },
                                    data: data2
                                }
                            ]
                        };
                       //创建图表
                        var chart = echarts.init(document.createElement('div'), '', {
                            width: 800,
                            height: 350
                        });
                        chart.setOption(option);
                        var control = new ol.control.Control({
                            element: chart.getDom(),
                            target: document.getElementById('infoControl')
                        });
                        map.addControl(control);

                    });
            });
        }
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值