QueryTask属性查询+空间查询（附样例源码）

留言

效果图

结合空间查询和属性查询的代码，加上bootstarp控制格式，添加jq组件特效

部分代码

1. load
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 初始化字段
            function setField(fieldAliases) {
                var th_html = "<th scope='col' title='President Number'>ID</th> ";
                for (let key in fieldAliases) {
                    th_html += "<th scope='col'>" + key + "</th>"
                }
                $("#th_rr").html(th_html);
            }
            // 设置赋值符号
            function setSym(type) {
                switch (type) {
                    case "esriGeometryPoint": return markerSymbol; break;
                    case "esriGeometryLine": return lineSymbol; break;
                    case "esriGeometryPolygon": return fillSymbol; break;

                }
            }
            // table 内容
            function setTable(queryResult) {
                var tbodyStr = "";
                for (var i = 0; i < queryResult.features.length; i++) {
                    var graphic = queryResult.features[i];
                    graphic.setSymbol(setSym(queryResult.geometryType));
                    map.graphics.add(graphic);

                    tbodyStr += "<tr>";

                    tbodyStr += "<td>" + i + "</td>";

                    for (let j = 0; j < filts.length; j++) {
                        tbodyStr += "<td>" + graphic.attributes[filts[j]] + "</td>";
                    }
                    tbodyStr += "</tr>";
                }
                $("#tbody_rr").html(tbodyStr);

            }
            // table筛选功能
            function tableChoose() {
                $('table').filterTable({
                    inputSelector: '#input-filter'
                });
            }
2. power
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//属性查询事件
            on(dom.byId("select"), "keypress", function (e) {
                var query = new Query();
                query.where = $("#select").val();
                queryTask.execute(setQuery(query), showQueryResult);
            })

            // 空间查询
            var toolbar = new Draw(map);
            query("button").on("click", function (event) {
                map.graphics.clear();
                var value = this.innerHTML;
                switch (value) {
                    case "点": {
                        toolbar.activate(Draw.POINT, {
                            showTooltips: true
                        })
                        break;
                    }
                    case "线": {
                        toolbar.activate(Draw.POLYLINE, {
                            showTooltips: true
                        })
                        break;
                    }
                    case "面": {
                        toolbar.activate(Draw.POLYGON, {
                            showTooltips: true
                        })
                        break;
                    }
                    case "X": {

                        toolbar.deactivate();
                        break;
                    }
                }
            })
            // 绘图事件
            on(toolbar, "draw-complete", function (result) {
                toolbar.deactivate();
                var query = new Query();
                query.geometry = result.geometry;
                queryTask.execute(setQuery(query), showQueryResult);
            });
3. Static
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 设置筛选公共参数
            function setQuery(query) {
                query.returnGeometry = true;
                query.outFields = filts;
                return query;
            }
            // 显示
            function showQueryResult(queryResult) {
                console.log(queryResult)
                setField(queryResult.fieldAliases)
                if (queryResult.features.length == 0) {
                    $("#divShowResult").html("");
                    return;
                }

                if (queryResult.features.length >= 1)
                    setTable(queryResult)
                tableChoose();
            }

源码