使用 SQL 过滤要素图层

了解如何使用 SQL 查询条件限制要素图层中显示的要素。

托管要素图层包含大量要素。要显示要素的子集，可使用定义表达式在服务器端过滤要素。定义表达式与要素图层查询不同：它们仅支持不带几何 (空间) 参数的 SQL where 子句，而且仅当要素显示在地图或场景中时过滤要素。它不能像查询要素图层那样返回要素。

在本教程中，将使用 definitionExpression 应用服务器端 SQL 查询来过滤 LA County Parcels 要素图层。

步骤

创建新 Pen

1. 要开始使用，请完成显示地图教程 或 使用此 Pen。

1. 代码块使用深色

       

   更改行

添加模块

1. 在 require 语句中，添加 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
   <script>
     require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
   
         "geoscene/layers/FeatureLayer"
   
       ], function(geosceneConfig, Map, MapView, FeatureLayer) {
    

   展开

创建选择器

使用 HTML select 元素为 LA County Parcels 要素图层提供 SQL 查询列表。

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

   展开

   代码块使用深色

                                                                                            

   添加行。添加行。

   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: [118.80543,34.02700], // Longitude, latitude
           zoom: 12
         });
   
         // Create a UI with the filter expressions
         const sqlExpressions = ["选择一个查询条件", "Roll_LandValue < 200000", "TaxRateArea = 10853", "Bedrooms5 > 0", "UseType = 'Residential'", "Roll_RealEstateExemp > 0"];
    

   展开

2. 创建父 selectFilter 元素并为每个 SQL 查询添加 option 元素。将某些 css 样式添加至元素。

   展开

   代码块使用深色

                                                                                            

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

   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 = ["选择一个查询条件", "Roll_LandValue < 200000", "TaxRateArea = 10853", "Bedrooms5 > 0", "UseType = 'Residential'", "Roll_RealEstateExemp > 0"];
   
         // 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);
         });
   
    

   展开

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

   展开

   代码块使用深色

                                                                                            

   添加行。

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

   展开

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

创建待过滤的要素图层

使用 FeatureLayer 类访问 LA County Parcels 要素图层。由于您正在执行服务器端查询，因此无需将要素图层添加到地图中。但是，要查看查询结果，需将要素图层添加到地图中。

1. 创建 featureLayer 并设置 url 属性以访问要素服务中的要素图层。设置 outFields 属性以返回客户端上的所有属性，并设置 popupTemplate 以显示宗地描述和土地价值。将 definitionExpression 设置为 1=0，以便在加载图层时不显示任何要素。将 featureLayer 添加至 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
         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://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
           outFields: ["*"],
           popupTemplate: {
             title: "{UseType}",
             content: "Description: {UseDescription}. Land value: {Roll_LandValue}"
           },
           definitionExpression: "1=0"
         });
         map.add(featureLayer);
   
    

   展开

应用 SQL 表达式

definitionExpression 是 SQL where 子句。使用表达式以应用过滤器并限制地图中显示的要素。

1. 创建 setFeatureLayerFilter 函数，其参数为 expression。设置 definitionExpression 以使用 expression 过滤要素图层。

   展开

   代码块使用深色

                                                                                            

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

   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://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
           outFields: ["*"],
           popupTemplate: {
             title: "{UseType}",
             content: "Description: {UseDescription}. Land value: {Roll_LandValue}"
           },
           definitionExpression: "1=0"
         });
         map.add(featureLayer);
   
         // Server-side filter
         function setFeatureLayerFilter(expression) {
           featureLayer.definitionExpression = expression;
         }
   
    

   展开

2. 添加一个事件监听器，以便在从选择器中选择 SQL where 子句时调用 setFeatureLayerFilter 函数。

   展开

   代码块使用深色

                                                                                            

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

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

   展开

运行应用程序

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

显示地图时，您应能够从选择器中选择 SQL 查询，以将定义表达式应用于地图的可见范围。只有匹配的要素才会添加到要素图层并显示在视图中。

下一步是什么？

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

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