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

功能服务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 graphic;
                                                            var drawToolbar;
                                                            var drawType;
                                                            var graphiclayer;
                                                            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);
                                                                graphiclayer = new esri.layers.GraphicsLayer();
                                                                graphiclayer.id = "graphiclayer";
                                                                map.addLayer(graphiclayer);
                                                                map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                drawToolbar = new esri.toolbars.Draw(map.esriMap, { showTooltips: false });
                                                            };
                                                            function DrawGeometry(type) {
                                                                drawType = type;
                                                                switch (type) {
                                                                    case "point":
                                                                        drawToolbar.activate(esri.toolbars.Draw.POINT);
                                                                        break;
                                                                    case "polyline":
                                                                        drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
                                                                        break;
                                                                    case "polygon":
                                                                        drawToolbar.activate(esri.toolbars.Draw.POLYGON);
                                                                        break;
                                                                }
                                                                dojo.connect(drawToolbar, "onDrawEnd", function (geometry) {
                                                                    DrawEnd(geometry);
                                                                });
                                                            };
                                                            function DrawEnd(geometry) {
                                                                graphiclayer.clear();
                                                                if (geometry) {
                                                                    var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                                                                    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]));
                                                                    var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2);
                                                                    var symbol = null;
                                                                    switch (drawType) {
                                                                        case "point":
                                                                            symbol = pointSymbol;
                                                                            break;
                                                                        case "polyline":
                                                                            symbol = lineSymbol;
                                                                            break;
                                                                        case "polygon":
                                                                            symbol = fillSymbol;
                                                                            break;
                                                                    }
                                                                    graphic = new esri.Graphic(geometry, symbol);
                                                                    graphiclayer.add(graphic);
                                                                    //查询
                                                                    var queryTask = new esri.tasks.QueryTask(SpatialStaticMapUrl + "/0");
                                                                    var query = new esri.tasks.Query();
                                                                    query.outFields = ["*"];
                                                                    query.geometry = geometry;
                                                                    query.units = "meters";
                                                                    query.distance = 300;
                                                                    query.returnGeometry = true;
                                                                    queryTask.on("complete", CompleteHandler);
                                                                    queryTask.on("error", ErrorHandler);
                                                                    queryTask.execute(query);
                                                                }
                                                            };
                                                            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 drawType = type;
2.	switch (type) {
3.	case "point":
4.	drawToolbar.activate(esri.toolbars.Draw.POINT);
5.	break;
6.	case "polyline":
7.	drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
8.	break;
9.	case "polyline":
10.	drawToolbar.activate(esri.toolbars.Draw.POLYGON);
11.	break;
11.	};
执行空间查询

执行空间查询。
1.	var queryTask = new esri.tasks.QueryTask(SpatialStaticMapUrl);
2.	var query = new esri.tasks.Query();
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);