查询要素图层 (SQL)

了解如何执行 SQL 查询以访问要素图层中的面要素。

要素图层中可能会包含大量要素。要访问要素的子集，可以执行 SQL 查询或空间查询，也可同时执行两者。返回的每条记录可以包含要素属性、几何，或同时返回属性和几何。在访问托管数据的子集试，SQL 和空间查询非常有用。

在本教程中，我们将执行服务器端 SQL 查询获取LA County Parcel 要素图层中的要素子集。要素图层包含的要素数超过了 240 万个。结果在地图上以Graphic显示。

步骤

创建新 Pen

1. 要开始使用，请完成显示地图教程 或 使用此 Pen。

1. 代码块使用深色

       

   更改行

添加模块

1. 在 require 语句中，添加 FeatureLayer 模块。

   更多信息

   GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。更改行

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
       require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
         "geoscene/layers/FeatureLayer",
       ], function(geosceneConfig, Map, MapView, FeatureLayer) {
    

   展开

创建 SQL 选择器

GeoScene 要素图层支持标准 SQL 查询 where 子句。使用 HTML 选择元素为 LA County Parcel 要素图层提供 SQL 查询列表。

1. 创建 SQL 查询的 parcelType 数组。将 whereClause 元素分配给数组中的 SQL 查询。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         const view = new MapView({
           container: "viewDiv",
           map: map,
           center: [-118.80543,34.03000], //Longitude, latitude
           zoom: 13
         });
   
         // SQL query array
         const parcelLayerSQL = ["选择一个查询条件", "UseType = 'Residential'",  "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"];
         let whereClause = parcelLayerSQL[0];
    

   展开

2. 创建父 select 元素并为每个 SQL 查询添加 option 元素。将一些基本样式添加至元素。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         // SQL query array
         const parcelLayerSQL = ["选择一个查询条件", "UseType = 'Residential'",  "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"];
         let whereClause = parcelLayerSQL[0];
   
         // Add SQL UI
         const select = document.createElement("select","");
         select.setAttribute("class", "geoscene-widget geoscene-select");
         select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em");
         parcelLayerSQL.forEach(function(query){
           let option = document.createElement("option");
           option.innerHTML = query;
           option.value = query;
           select.appendChild(option);
         });
   
    

   展开

3. 将 select 元素添加至 view 的 top-right 处。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         // Add SQL UI
         const select = document.createElement("select","");
         select.setAttribute("class", "geoscene-widget geoscene-select");
         select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em");
         parcelLayerSQL.forEach(function(query){
           let option = document.createElement("option");
           option.innerHTML = query;
           option.value = query;
           select.appendChild(option);
         });
   
         view.ui.add(select, "top-right");
    

   展开

4. 添加一个事件监听器以监听 select 元素的更改。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         view.ui.add(select, "top-right");
   
          // Listen for changes
         select.addEventListener('change', (event) => {
           whereClause = event.target.value;
   
         });
    

   展开

5. 验证是否已创建 select 元素。

创建待查询的要素图层

使用 FeatureLayer 类访问 LA County Parcel 要素图层。由于您正在执行服务器端查询，因此无需将要素图层添加到地图中。

1. 创建 parcelLayer 并设置 url 属性以访问要素服务中的要素图层。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
          // Listen for changes
         select.addEventListener('change', (event) => {
           whereClause = event.target.value;
   
         });
   
         // Get query layer and set up query
    const parcelLayer = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
         });
    

   展开

执行查询

使用 queryFeatures 方法对要素图层执行 SQL 查询。调用该方法时，Query 将自动转换。

1. 创建一个 queryFeatureLayer 函数，具有 extent 参数。定义一个 parcelQuery 元素，并将 where 属性设置为 whereClause。将 spatialProperty 设置为仅返回与 geometry 相交的要素，这仅限于地图的可见 extent。outFields 属性将仅返回属性的子集。最后，将 returnGeometry 设置为 true，以便可以显示要素。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         // Get query layer and set up query
    const parcelLayer = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
         });
   
         function queryFeatureLayer(extent) {
   
           const parcelQuery = {
            where: whereClause,  // Set by select element
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: extent, // Restricted to visible extent of the map
            outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return
            returnGeometry: true
           };
   
         }
    

   展开

2. 在 parcelLayer 上使用 parcelQuery 调用 queryFeatures 方法。要查看返回的要素数，请将结果长度写入控制台。这将在下一步中更新。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         function queryFeatureLayer(extent) {
   
           const parcelQuery = {
            where: whereClause,  // Set by select element
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: extent, // Restricted to visible extent of the map
            outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return
            returnGeometry: true
           };
   
           parcelLayer.queryFeatures(parcelQuery)
   
           .then((results) => {
   
             console.log("Feature count: " + results.features.length)
   
           }).catch((error) => {
             console.log(error.error);
           });
   
         }
    

   展开

3. 更新事件处理程序，以便在选择器更改时调用 queryFeatureLayer 函数。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
          // Listen for changes
         select.addEventListener('change', (event) => {
           whereClause = event.target.value;
   
           queryFeatureLayer(view.extent);
   
         });
    

   展开

4. 在右上角，单击运行。从选择器中选择一个 SQL 查询。在左下角，单击控制台以查看要从每个查询返回的要素数。

显示要素

要显示从 SQL 查询返回的要素，可将其作为面图形添加至视图。另外还可定义弹出窗口，以便在单击要素时显示属性。

1. 创建 displayResults 函数，其中以 results 为参数。定义 symbol 和 popupTemplate 变量以设置面图形的样式并显示弹出窗口。引用的属性与之前在查询中所指定的 outFields 相匹配。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           }).catch((error) => {
             console.log(error.error);
           });
   
         }
   
         function displayResults(results) {
           // Create a blue polygon
           const symbol = {
             type: "simple-fill",
             color: [ 20, 130, 200, 0.5 ],
             outline: {
               color: "white",
               width: .5
             },
           };
   
           const popupTemplate = {
             title: "Parcel {APN}",
             content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
           };
   
         }
    

   展开

2. 将 symbol 和 popupTemplate 元素分配给从查询返回的每个要素。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           const popupTemplate = {
             title: "Parcel {APN}",
             content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
           };
   
           // Assign styles and popup to features
           results.features.map((feature) => {
             feature.symbol = symbol;
             feature.popupTemplate = popupTemplate;
             return feature;
           });
   
    

   展开

3. 清除现有图形和弹出窗口，然后将返回的新要素添加至 view。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           // Assign styles and popup to features
           results.features.map((feature) => {
             feature.symbol = symbol;
             feature.popupTemplate = popupTemplate;
             return feature;
           });
   
           // Clear display
           view.popup.close();
           view.graphics.removeAll();
           // Add features to graphics layer
           view.graphics.addMany(results.features);
    

   展开

4. 更新 queryFeatureLayer 函数以调用 displayResults 函数。移除 console.log。

   展开

   代码块使用深色

                                                                                                                                       

   移除行添加行。

   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
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           parcelLayer.queryFeatures(parcelQuery)
   
           .then((results) => {
   
             console.log("Feature count: " + results.features.length)
   
             displayResults(results);
   
           }).catch((error) => {
             console.log(error.error);
           });
    

   展开

运行应用程序

在 CodePen 中，运行代码以显示地图。

显示地图时，您应能够从选择器中选择 SQL 查询。结果要素会以面状图形添加到地图中。SQL 查询应用于地图的可见范围内。

下一步是什么？

要了解如何使用其他 API 功能，请参阅以下教程：

• 查询要素图层 (空间)
• 编辑要素数据