查询要素图层 (空间)

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

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

在本教程中，您将使用 Sketch 微件绘制要素，然后对要素图层执行空间查询。查询图层为 LA County Parcels 要素图层，包含 ±240 万个要素。空间查询使用草绘要素返回所有相交的宗地。

步骤

创建新 Pen

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

1. 代码块使用深色

       

   更改行

添加模块

1. 在 require 语句中，添加 Sketch、GraphicsLayer 和 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
   133
   134
   135
   136
   137
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
   
         "geoscene/widgets/Sketch",
         "geoscene/layers/GraphicsLayer",
         "geoscene/layers/FeatureLayer"
   
       ], function(geosceneConfig, Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
    

   展开

创建草绘微件

使用 Sketch 和 GraphicsLayer 类创建图形。图形将添加至地图中的图形图层中。事件处理程序将监听来自草绘微件的更改并相应地更新查询。

1. 创建 graphicsLayerSketch 并将其添加到 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
   133
   134
   135
   136
   137
         const view = new MapView({
           container: "viewDiv",
           map: map,
           center: [-118.80543,34.03000], //Longitude, latitude
           zoom: 13
         });
   
         // Add sketch widget
         const graphicsLayerSketch = new GraphicsLayer();
         map.add(graphicsLayerSketch);
    

   展开

2. 创建 sketch微件并将 layer 属性设置为 graphicsLayerSketch。将微件添加至 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
   133
   134
   135
   136
   137
         // Add sketch widget
         const graphicsLayerSketch = new GraphicsLayer();
         map.add(graphicsLayerSketch);
   
         const sketch = new Sketch({
           layer: graphicsLayerSketch,
           view: view,
           creationMode: "update" // Auto-select
         });
   
         view.ui.add(sketch, "top-right");
    

   展开

3. 创建一个事件侦听器，其将在每次绘制图形时更新。这将运行一个新查询。

   展开

   代码块使用深色

                                                                                                                                            

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

   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
   133
   134
   135
   136
   137
         view.ui.add(sketch, "top-right");
   
         // Add sketch events to listen for and execute query
         sketch.on("update", (event) => {
   
         });
    

   展开

4. 您应在视图右上角看到草绘微件。单击微件中的一个选项以在地图上绘制。

创建待查询的要素图层

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

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

   更多信息

   要素图层由 URL 末尾的索引值进行引用。要确定索引值，请访问 LA County Parcels 要素服务。在本例中，索引为 0。

   展开

   代码块使用深色

                                                                                                                                            

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

   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
   133
   134
   135
   136
   137
         // Add sketch events to listen for and execute query
         sketch.on("update", (event) => {
   
         });
   
         // Reference query layer
         const parcelLayer = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
         });
    

   展开

执行查询

定义 parcelQuery 并使用 FeatureLayer queryFeatures 方法执行查询。

1. 创建一个以 geometry 为参数的 queryFeaturelayer 函数，并定义一个 parcelQuery。将 spatialRelationship 设置为 intersects，并使用草绘微件中的 geometry。通过将 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
   133
   134
   135
   136
   137
         // Reference query layer
         const parcelLayer = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
         });
   
         function queryFeaturelayer(geometry) {
   
           const parcelQuery = {
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: geometry,  // The sketch feature geometry
            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
   133
   134
   135
   136
   137
         function queryFeaturelayer(geometry) {
   
           const parcelQuery = {
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: geometry,  // The sketch feature geometry
            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);
           });
   
         }
    

   展开

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
   133
   134
   135
   136
   137
         // Add sketch events to listen for and execute query
         sketch.on("update", (event) => {
   
           // Create
           if (event.state === "start") {
             queryFeaturelayer(event.graphics[0].geometry);
           }
           if (event.state === "complete"){
             graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
           }
           // Change
           if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
             queryFeaturelayer(event.graphics[0].geometry);
           }
   
         });
    

   展开

4. 使用微件以草绘图形。在左下角，单击控制台以查看查询返回的要素数。

显示要素

要显示查询所返回的宗地要素，可将其作为面图形添加至视图。添加图形之前，可定义符号和弹出窗口，以便在单击要素时，显示属性。

1. 创建 displayResults 函数。定义 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
   133
   134
   135
   136
   137
           const parcelQuery = {
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: geometry,  // The sketch feature geometry
            outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return
            returnGeometry: true
           };
   
         }
   
         // Show features (graphics)
         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
   133
   134
   135
   136
   137
           const popupTemplate = {
             title: "Parcel {APN}",
             content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
           };
   
           // Set symbol and popup
           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
   133
   134
   135
   136
   137
           // Set symbol and popup
           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
   133
   134
   135
   136
   137
           parcelLayer.queryFeatures(parcelQuery)
           .then((results) => {
   
             console.log("Feature count: " + results.features.length)
   
             displayResults(results);
    

   展开

运行应用程序

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

当您使用微件在地图上草绘要素时，将在要素图层上运行空间查询，并返回与草绘要素相交的所有宗地。

下一步是什么？

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

• 查询要素图层 (SQL)