顺德区地理信息公共服务平台

功能服务API 空间统计分析
如何进行加载地图进行浏览？
下面是地图浏览的示例代码。
                                                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







                                                        <html xmlns="http://www.w3.org/1999/xhtml">
                                                        <head>
                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />







                                                        <title>地图浏览Demo </title>
                                                        <script type="text/javascript"></script>
                                                        <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
                                                        <style type="text/css">
                                                            .mapContent {
                                                                width: 100%;
                                                                height: 400px;
                                                            }

                                                            .content {
                                                                height: 380px;
                                                                width: 741px;
                                                                text-align: left;
                                                            }

                                                            #map_div {
                                                                position: absolute;
                                                            }

                                                            #tool_div {
                                                                height: 50px;
                                                            }

                                                            .Button {
                                                                margin: 13px 0px 0px 10px;
                                                            }
</style>
                                                                </head>
                                                        <body>
                                                        <div class="mapContent">
                                                        <div id="map_div" class="content">
                                                    
                                                                        </div>
                                                                    </div>
                                                        <div id="tool_div">
                                                        
                                                                    </div>
                                                                </body>
                                                            </html>
                                                        <script type="text/javascript">
                                                            var map;
                                                            var layer;
                                                            var polygon;
                                                            function showMap() {
                                                                map = new DCIMap("map_div", DCIMapConfig.mapInitParams);

                                                                var vectorLayer = null;
                                                                switch (DCIMapConfig.vecMap.type) {
                                                                    case 0://wmts
                                                                        vectorLayer = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
                                                                        break;
                                                                    case 1://MapServer
                                                                        vectorLayer = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
                                                                        break;
                                                                }
                                                                map.addLayer(vectorLayer, 0);
                                                                map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                            };
                                                            function loadData() {
                                                                var imageParameters = new esri.layers.ImageParameters();
                                                                imageParameters.layerIds = ['0'];
                                                                imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
                                                                imageParameters.transparent = true;
                                                                layer = new esri.layers.ArcGISDynamicMapServiceLayer(SpatialStaticMapUrl, { "imageParameters": imageParameters });
                                                                map.addLayer(layer, 1);
                                                            };
                                                            function DrawPolygon() {
                                                                if (!!layer) {
                                                                    var drawToolbar = new esri.toolbars.Draw(map.esriMap, { showTooltips: false });
                                                                    drawToolbar.activate(esri.toolbars.Draw.POLYGON);
                                                                    dojo.connect(drawToolbar, "onDrawEnd", function (geometry) {
                                                                        DrawEnd(geometry);
                                                                    });
                                                                } else {
                                                                    alert("请先导入待统计的要素数据!!");
                                                                }
                                                            };
                                                            function DrawEnd(geometry) {
                                                                if (geometry) {
                                                                    var fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([50, 50, 50, 0.3]));
                                                                    polygon = new esri.Graphic(geometry, fillSymbol);
                                                                    map.esriMap.graphics.add(polygon);
                                                                }
                                                            };
                                                            function ExeStatic() {
                                                                if (polygon) {
                                                                    var queryTask = new esri.tasks.QueryTask(SpatialStaticMapUrl + "/0");
                                                                    var query = new esri.tasks.Query();
                                                                    query.outFields = ["*"];
                                                                    query.geometry = polygon.geometry;
                                                                    query.returnGeometry = true;
                                                                    queryTask.on("complete", CompleteHandler);
                                                                    queryTask.on("error", ErrorHandler);
                                                                    queryTask.execute(query);
                                                                } else {
                                                                    alert("请先绘制统计区域!!");
                                                                }
                                                            };
                                                            function CompleteHandler(featureSet) {
                                                                var xAxis = [];
                                                                var yAxis = [];
                                                                if (featureSet) {
                                                                    var features = featureSet.featureSet.features;
                                                                    //查询结果归类处理
                                                                    if (features.length > 0) {
                                                                        for (var i = 0; i < features.length; i++) {
                                                                            var feature = features[i];
                                                                            var v = feature.attributes[StaticFieldIndex];
                                                                            if (v) {
                                                                                v = v.replace(/\s+/g, "");
                                                                            }
                                                                            if (v) {
                                                                                if (xAxis.length == 0) {
                                                                                    xAxis.push(v);
                                                                                    yAxis[0] = 1;
                                                                                } else {
                                                                                    if (xAxis.indexOf(v) > -1) {
                                                                                        yAxis[xAxis.indexOf(v)] += 1;
                                                                                    } else {
                                                                                        xAxis.push(v);
                                                                                        yAxis[xAxis.length - 1] = 1;
                                                                                    }
                                                                                }
                                                                            }
                                                                        }
                                                                    } else {
                                                                        xAxis[0] = 0;
                                                                        yAxis[0] = 0;
                                                                    }
                                                                } else {
                                                                    xAxis[0] = 0;
                                                                    yAxis[0] = 0;
                                                                }
                                                                CreateChart(xAxis, yAxis);
                                                            };
                                                            function ErrorHandler(data) {
                                                                if (data) {
                                                                    alert(data.toString());
                                                                }
                                                            };
                                                            function CreateChart(xData, yData) {
                                                                var chartDiv = document.getElementById('resultChart');
                                                                chartDiv.style.display = "block";
                                                                var myChart = echarts.init(chartDiv);
                                                                var option = {
                                                                    color: ["#05a9f5", "#ff4081"],
                                                                    title: {
                                                                        text: '统计结果',
                                                                        left: '30%'
                                                                    },
                                                                    tooltip: {
                                                                        trigger: 'axis'
                                                                    },
                                                                    toolbox: {
                                                                        show: true,

                                                                        feature: {
                                                                            magicType: { show: true, type: ['line', 'bar'] },
                                                                            restore: { show: true },
                                                                            saveAsImage: { show: true }
                                                                        }
                                                                    },
                                                                    calculable: true,
                                                                    xAxis: [
                                                                        {
                                                                            type: 'category',
                                                                            data: xData
                                                                        }
                                                                    ],
                                                                    yAxis: [
                                                                        {
                                                                            type: 'value',
                                                                            name: '（个）            '
                                                                        }
                                                                    ],
                                                                    series: [
                                                                        {
                                                                            name: '统计量',
                                                                            type: 'line',
                                                                            data: yData,
                                                                            barWidth: 30,
                                                                            markPoint: {
                                                                                data: [
                                                                                    { type: 'min', name: '最小值' }
                                                                                ]
                                                                            },
                                                                            markLine: {
                                                                                data: [
                                                                                    { type: 'average', name: '平均值' }
                                                                                ]
                                                                            }
                                                                        }
                                                                    ]
                                                                };
                                                                myChart.setOption(option);
                                                            };
                                                            dojo.addOnLoad(showMap);
</script>
下面我们分步向您介绍：
添加要素

1.	var imageParameters = new esri.layers.ImageParameters();
2.	imageParameters.layerIds = ['0'];
3.	imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
4.	imageParameters.transparent = true;
5.	var layer = new esri.layers.ArcGISDynamicMapServiceLayer(
6.	SpatialStaticMapUrl,
7.	{ "imageParameters": imageParameters }
8.	);
9.	map.addLayer(layer, 1);
定义统计区域

绘制统计区域
1.	var drawToolbar = new esri.toolbars.Draw(
2.	map.esriMap,
3.	{ showTooltips: false }
4.	);
5.	drawToolbar.activate(esri.toolbars.Draw.POLYGON);
6.	dojo.connect(drawToolbar, "onDrawEnd", function (geometry) {
7.	DrawEnd(geometry);
8.	});
执行空间查询

执行空间查询。
1.	var query = new esri.tasks.Query();
2.	var queryTask = new esri.tasks.QueryTask(SpatialStaticMapUrl);
4.	query.outFields = ["*"];
5.	query.geometry = polygon.geometry;
6.	query.returnGeometry = true;
7.	queryTask.on("complete", CompleteHandler);
8.	queryTask.on("error", ErrorHandler);
9.	queryTask.execute(query);