查询要素图层 (SQL)

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

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

在本教程中，我们将执行服务器端 SQL 查询以获取 旅游景点 要素图层中的要素子集。结果要素将在地图上显示为图形。

步骤 ​

创建新 Pen ​

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

添加模块 ​

1. 通过 require 引入FeatureLayer 模块。

   更多内容

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

   js

   require([
       "geoscene/config",
       "geoscene/Map",
       "geoscene/views/MapView",
       "geoscene/layers/FeatureLayer",
       ], function(geosceneConfig, Map, MapView, FeatureLayer) {
   })

   1
   2
   3
   4
   5
   6
   7
   

创建 SQL 选择器 ​

GeoScene 要素图层支持标准 SQL 查询 where 子句。使用 HTML 选择元素为 旅游景点 要素图层提供 SQL 查询列表。

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

   js

       const view = new MapView({
           container: "viewDiv",
           map: map,
           center: [116.3,39.9], //经度，纬度
           zoom: 9
       });
   
       // SQL query array
       const parcelLayerSQL = ["选择查询条件", "dj = '4A'", "dj = '3A'", "dj = '2A'", "dj = '1A'"];
       let whereClause = parcelLayerSQL[0];

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

2. 创建 select 元素，添加 option 元素，每一个对应一个查询条件。将一些基本样式添加至元素。

   js

       // SQL query array
       const parcelLayerSQL = ["选择查询条件", "dj = '4A'", "dj = '3A'", "dj = '2A'", "dj = '1A'"];
       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);
       });

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

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

   js

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

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

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

   js

       view.ui.add(select, "top-right");
   
       // Listen for changes
       select.addEventListener('change', (event) => {
           whereClause = event.target.value;
       });

   1
   2
   3
   4
   5
   6
   

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

创建待查询的要素图层 ​

使用旅游景点 要素图层创建FeatureLayer 类。由于我们执行服务器端查询，所以无需将要素图层添加到地图中。

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

   js

       // Listen for changes
       select.addEventListener('change', (event) => {
           whereClause = event.target.value;
       });
   
       // Get query layer and set up query
       const placeLayer = new FeatureLayer({
           url: "https://www.geosceneonline.cn/server/rest/services/Hosted/北京旅游地图/FeatureServer/0",
       });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

执行查询 ​

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

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

   js

       // Get query layer and set up query
       const placeLayer = new FeatureLayer({
           url: "https://www.geosceneonline.cn/server/rest/services/Hosted/北京旅游地图/FeatureServer/0",
       });
   
       function queryFeatureLayer(extent) {
   
           const placeQuery = {
               where: whereClause, // Set by select element
               spatialRelationship: "intersects", // Relationship operation to apply
               geometry: extent, // Restricted to visible extent of the map
               outFields: ["dj","mc","dz"], // Attributes to return
               returnGeometry: true
           };
   
       }

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

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

   js

       function queryFeatureLayer(extent) {
           const placeQuery = {
               where: whereClause, // Set by select element
               spatialRelationship: "intersects", // Relationship operation to apply
               geometry: extent, // Restricted to visible extent of the map
               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.error);
           });
       }

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

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

   js

       // Listen for changes
       select.addEventListener('change', (event) => {
           whereClause = event.target.value;
           queryFeatureLayer(view.extent);
       });

   1
   2
   3
   4
   5
   

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

显示要素 ​

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

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

   js

               }).catch((error) => {
                   console.log(error.error);
               });
           }
   
           function displayResults(results) {
           // Create a blue polygon
               const symbol = {
                   type: "simple-mark",
                   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
   

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

   js

           const popupTemplate = {
               title: "景点 {mc}",
               content: "等级: {dj} <br> 地址: {dz} <"
           };
   
           // Assign styles and popup to features
           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

           // Assign styles and popup to features
           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);
           }).catch((error) => {
               console.log(error.error);
           });

   1
   2
   3
   4
   5
   6
   

运行应用程序 ​

在 CodePen 中，运行代码。

从选择器中选择 SQL 查询，符合条件的要素会以点状图形添加到地图中。SQL 查询应用于地图的可见范围内。

下一步是什么？ ​

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

• 查询要素图层 (空间)

• 编辑要素数据