使用 SQL 过滤要素图层

了解如何使用 SQL 条件过滤要素图层，显示需要显示的要素。

托管要素图层包含大量要素。对于需要显示要素子集的情况，也可以通过过滤条件在服务器端过滤要素。过滤与查询不同的是：过滤不支持几何 (空间) 参数的 SQL where 语句，即不支持空间参数过滤，而且仅过滤当前地图或场景中显示的要素。它不能像查询要素图层那样返回要素。

在本教程中，将使用 definitionExpression 应用服务器端 SQL 语句来过滤 北京景点 要素图层。

步骤 ​

创建新 Pen ​

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

添加模块 ​

1. 通过 require 引入FeatureLayer 模块。

   详细信息

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

   js

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

创建下拉菜单 ​

使用 HTML select 元素为 北京景点 要素图层提供 SQL 查询列表。

1. 创建 SQL 查询的 sqlExpressions 数组。

   js

           const view = new MapView({
           container: "viewDiv",
               map: map,
               center: [116.3,39.9], // Longitude, latitude
               zoom: 9
           });
   
           // Create a UI with the filter expressions
           const sqlExpressions = ["选择查询条件", "dj = '4A'", "dj = '3A'", "dj = '2A'", "dj = '1A'"];

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

2. 创建 selectFilter 元素，添加 option 元素，每个过滤条件对应是一个选项。添加样式。

   js

           // Create a UI with the filter expressions
           const sqlExpressions = ["选择查询条件", "dj = '4A'", "dj = '3A'", "dj = '2A'", "dj = '1A'"];
   
           // UI
           const selectFilter = document.createElement("select");
           selectFilter.setAttribute("class", "geoscene-widget geoscene-select");
           selectFilter.setAttribute("style", "width: 275px; font-family: Avenir Next W00; font-size: 1em;");
   
           sqlExpressions.forEach(function(sql){
               let option = document.createElement("option");
               option.value = sql;
               option.innerHTML = sql;
               selectFilter.appendChild(option);
           });

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

3. 将 selectFilter 添加至视图的 top-right 处。

   js

           sqlExpressions.forEach(function(sql){
               let option = document.createElement("option");
               option.value = sql;
               option.innerHTML = sql;
               selectFilter.appendChild(option);
           });
   
           view.ui.add(selectFilter, "top-right");

   1
   2
   3
   4
   5
   6
   7
   8
   

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

创建待过滤的要素图层 ​

使用 FeatureLayer 类访问 北京景点 要素图层。过滤是执行服务器端查询，无需将要素图层添加到地图中。但是，查看查询结果，需要将结果添加到地图中。

1. 创建 featureLayer 并设置 url 属性以访问要素服务中的要素图层。设置 outFields 属性以返回客户端上的所有属性，设置 popupTemplate 以显示属性信息。将 definitionExpression 设置为 1=0，以便在加载图层时不显示任何要素。将 featureLayer 添加至 map。

   js

           view.ui.add(selectFilter, "top-right");
   
           // Add a feature layer to map with all features visible on client (no filter)
           const featureLayer = new FeatureLayer({
               url: "https://www.geosceneonline.cn/server/rest/services/Hosted/北京旅游地图/FeatureServer/0",
               outFields: ["*"],
               popupTemplate: {
               title: "{mc}",
               content: "等级: {dj}。地址: {dz}"
           },
           definitionExpression: "1=0"
       });
       map.add(featureLayer);

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

应用 SQL 表达式 ​

definitionExpression 是 SQL where 子句。应用它来控制地图中显示的要素。

1. 定义 setFeatureLayerFilter 函数，其参数为 expression。函数中设置 definitionExpression ，按照 expression 条件过滤要素图层。

   js

           view.ui.add(selectFilter, "top-right");
   
           // Add a feature layer to map with all features visible on client (no filter)
           const featureLayer = new FeatureLayer({
               url: "https://www.geosceneonline.cn/server/rest/services/Hosted/北京旅游地图/FeatureServer/0",
               outFields: ["*"],
               popupTemplate: {
               title: "{mc}",
               content: "等级: {dj}。 地址: {dz}"
           },
           definitionExpression: "1=0"
       });
       map.add(featureLayer);
   
       // Server-side filter
       function setFeatureLayerFilter(expression) {
           featureLayer.definitionExpression = expression;
       }

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

2. 添加事件监听器，从选择器中选择 SQL where 子句时触发，执行调用 setFeatureLayerFilter 函数。

   js

       // Server-side filter
       function setFeatureLayerFilter(expression) {
           featureLayer.definitionExpression = expression;
       }
   
       // Event listener
       selectFilter.addEventListener('change', function (event) {
           setFeatureLayerFilter(event.target.value);
       });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

运行应用程序 ​

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

从下拉列表中选择 SQL 查询，可以根据表达式应过滤地图的可见范围和要素。只有匹配的要素才会显示在视图中。

下一步是什么？ ​

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

• 查询要素图层 (SQL)

• 查询要素图层 (空间)