查询要素图层 (空间)

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

在大数据量要素图层中需要访问要素子集时，可以执行 SQL 查询或空间查询，也可同时执行两者。每条返回的结果要素包含了属性、几何。在需要仅访问托管数据的子集的场景中，SQL 和空间查询非常有用。 在本教程中，我们将使用 Sketch 微件绘制要素，然后对要素图层执行空间查询。查询图层为 北京景点 要素图层。空间查询使用草绘要素返回所有与其相交的旅游景点。

步骤 ​

创建新 Pen ​

1. 在此之前，先了解显示地图教程 。

添加模块 ​

1. 通过 require 引入Sketch、GraphicsLayer 和 FeatureLayer 模块。

   更多内容

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

   js

       "geoscene/config",
       "geoscene/Map",
       "geoscene/views/MapView",
   
       "geoscene/widgets/Sketch",
       "geoscene/layers/GraphicsLayer",
       "geoscene/layers/FeatureLayer"
   
       ], function(geosceneConfig, Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

创建草绘微件 ​

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

1. 创建 graphicsLayerSketch 并将其添加到 map 中。

   js

           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);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

2. 创建 sketch 微件并将 layer 属性设置为 graphicsLayerSketch。将微件添加至 view 的右上角。

   js

           // 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");

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

3. 创建一个事件侦听器，监听图形变化，执行查询。

   js

           view.ui.add(sketch, "top-right");
   
           // Add sketch events to listen for and execute query
           sketch.on("update", (event) => {
   
           });

   1
   2
   3
   4
   5
   6
   

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

创建待查询的要素图层 ​

创建北京景点 要素图层的 FeatureLayer 对象。由于在服务器端执行查询，所以无需将要素图层添加到地图中。

1. 定义 placeLayer ，设置 url 属性。 URL 末尾的索引值指要素服务的图层索引，访问 北京景点 要素服务确定图层索引。在本例中，索引为 0。

   js

           // 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",
           });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

执行查询 ​

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

1. 定义查询要素图层函数 queryFeaturelayer，参数为 geometry 。定义一个局部变量 placeQuery，设置查询方式，空间关系 spatialRelationship 设置为相交，值为 intersects，相交图形为草绘微件绘制的图形 geometry，输出字段outFields 属性设置为需要的字段列表。最后，将 returnGeometry 设置为 true 以便显示要素几何。

   js

           // 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
               };
           }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

2. 在 placeLayer 上按照 placeQuery 定义的参数调用 queryFeatures 方法执行查询。需要查看返回的要素数，将结果个数输出在控制台。代码在下一步更新。

   js

           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);
               });
           }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   

3. 每次在地图上草绘图形时，更新事件处理程序都会调用 queryFeatureLayer 函数，将它监听到的图形传递给查询方法作为参数。

   js

           // 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);
               }
   
           });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   

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

显示要素 ​

在地图上显示查询返回的要素结果，需要将结果以点图形添加到视图中。添加图形之前，可以定义符号和弹出窗口，以便在单击要素时，显示属性。

1. 定义 displayResults 函数。定义 symbol 和 popupTemplate 变量，设置点图形的符号和弹出窗口。弹窗引用的属性字段必须是查询中所指定的 outFields 中的字段。

   js

               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>"
               };
           }

   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
   

2. 将 symbol 和 popupTemplate 元素赋值给查询返回的每个要素。

   js

               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;
               });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

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

   js

               // 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);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

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

   js

               placeLayer.queryFeatures(placeQuery)
               .then((results) => {
                   console.log("Feature count: " + results.features.length)
                   displayResults(results);
               })

   1
   2
   3
   4
   5
   

运行应用程序 ​

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

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

下一步是什么？ ​

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

• 查询要素图层 (SQL)