使用 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) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   Expand

   代码块使用深色

                                                                                            

   添加行。更改行

   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
   <script>
     require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
   
         "geoscene/layers/FeatureLayer"
   
       ], function(geosceneConfig, Map, MapView, FeatureLayer) {
   

   Expand

创建下拉菜单

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

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

   Expand

   代码块使用深色

                                                                                            

   添加行。添加行。

   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
         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'"];
   

   Expand

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

   Expand

   代码块使用深色

                                                                                            

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

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

   Expand

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

   Expand

   代码块使用深色

                                                                                            

   添加行。

   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
         sqlExpressions.forEach(function(sql){
           let option = document.createElement("option");
           option.value = sql;
           option.innerHTML = sql;
           selectFilter.appendChild(option);
         });
   
         view.ui.add(selectFilter, "top-right");
   

   Expand

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

创建待过滤的要素图层

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

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

   Expand

   代码块使用深色

                                                                                            

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

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

   Expand

应用 SQL 表达式

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

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

   Expand

   代码块使用深色

                                                                                            

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

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

   Expand

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

   Expand

   代码块使用深色

                                                                                            

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

   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
         // Server-side filter
         function setFeatureLayerFilter(expression) {
           featureLayer.definitionExpression = expression;
         }
   
         // Event listener
         selectFilter.addEventListener('change', function (event) {
           setFeatureLayerFilter(event.target.value);
         });
   

   Expand

运行应用程序

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

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

下一步是什么？

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

• 查询要素图层 (SQL)
• 查询要素图层 (空间)