查询要素图层 (空间)

了解如何在要素图层中执行空间查询。

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

在本教程中，我们将使用 Sketch 微件绘制要素，然后对要素图层执行空间查询。查询图层为 北京景点 要素图层。空间查询使用草绘要素返回所有与其相交的旅游景点。

步骤

创建新 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: [116.3,39.9], //经度，纬度
           zoom: 9
         });
   
         // 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 对象。由于在服务器端执行查询，所以无需将要素图层添加到地图中。

1. 定义 placeLayer ，设置 url 属性。

   URL 末尾的索引值指要素服务的图层索引，访问 北京景点 要素服务确定图层索引。在本例中，索引为 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 placeLayer = new FeatureLayer({
           url: "https://www.geosceneonline.cn/server/rest/services/Hosted/北京旅游地图/FeatureServer/0",
         });
   

   展开

执行查询

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

1. 定义查询要素图层函数 queryFeaturelayer，参数为 geometry 。定义一个局部变量 placeQuery，设置查询方式，空间关系 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 placeLayer = new FeatureLayer({
           url: "https://www.geosceneonline.cn/server/rest/services/Hosted/北京旅游地图/FeatureServer/0",
         });
   
         function queryFeaturelayer(geometry) {
   
           const placeQuery  = {
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: geometry,  // The sketch feature geometry
            outFields: ["mc","dj","dz",], // Attributes to return
            returnGeometry: true
           };
   
         }
   

   展开

2. 在 placeLayer 上按照 placeQuery 定义的参数调用 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 placeQuery  = {
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: geometry,  // The sketch feature geometry
            outFields: ["dj","mc","dz",], // Attributes to return
            returnGeometry: true
           };
   
           placeLayer.queryFeatures(placeQuery )
           .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 placeQuery  = {
            spatialRelationship: "intersects", // Relationship operation to apply
            geometry: geometry,  // The sketch feature geometry
            outFields: ["dj","mc","dz"], // Attributes to return
            returnGeometry: true
           };
   
         }
   
         // Show features (graphics)
         function displayResults(results) {
   
         // Create a blue polygon
           const symbol = {
             type: "simple-marker",
             style: "circle",
             size: "10px",
             color: [ 20, 130, 200, 0.5 ],
             outline: {
               color: "white",
               width: .5
             },
           };
   
           const popupTemplate = {
             title: "景点 {mc}",
             content: "等级: {dj} <br> 地址: {dz} <br>"
           };
   
         }
   

   展开

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: "景点 {mc}",
             content: "等级: {dj} <br> 地址: {dz} <br>"
           };
   
           // 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.closePopup();
           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
           placeLayer.queryFeatures(placeQuery )
           .then((results) => {
   
             console.log("Feature count: " + results.features.length)
   
             displayResults(results);
   

   展开

运行应用程序

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

使用微件在地图上草绘要素时，将会执行要素图层空间查询，返回与草绘要素相交的所有景点要素。

下一步是什么？

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

• 查询要素图层 (SQL)