查询要素图层 (SQL)

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

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

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

步骤

创建新 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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
       require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
         "geoscene/layers/FeatureLayer",
       ], function(geosceneConfig, Map, MapView, FeatureLayer) {
   

   展开

创建 SQL 选择器

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

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         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];
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         // 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);
         });
   
   

   展开

3. 将 select 元素添加至 view 的 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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         // 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");
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         view.ui.add(select, "top-right");
   
          // Listen for changes
         select.addEventListener('change', (event) => {
           whereClause = event.target.value;
   
         });
   

   展开

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

创建待查询的要素图层

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

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
          // 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",
         });
   

   展开

执行查询

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

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         // 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
           };
   
         }
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
         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);
           });
   
         }
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

   添加行。

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
          // Listen for changes
         select.addEventListener('change', (event) => {
           whereClause = event.target.value;
   
           queryFeatureLayer(view.extent);
   
         });
   

   展开

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

显示要素

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

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           }).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>"
           };
   
         }
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           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;
           });
   
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

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

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           // 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);
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                       

   移除行添加行。

   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
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
           placeLayer.queryFeatures(placeQuery )
   
           .then((results) => {
   
             console.log("Feature count: " + results.features.length)
   
             displayResults(results);
   
           }).catch((error) => {
             console.log(error.error);
           });
   

   展开

运行应用程序

在 CodePen 中，运行代码。

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

下一步是什么？

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

• 查询要素图层 (空间)
• 编辑要素数据