使用 SQL 过滤要素图层

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

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

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

步骤

创建新 Pen

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

添加模块

在 require 语句中，添加 FeatureLayer 模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Change line
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

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

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 添加要素图层 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;
      }

      // Event listener
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建选择器

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

创建 SQL 查询的 sqlExpressions 数组。

Add line.Add line.
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], // 经度、纬度
        zoom: 12
      });

      // 创建具有过滤表达式的 UI
      const sqlExpressions = ["选择一个SQL查询条件...", "Roll_LandValue < 200000", "TaxRateArea = 10853", "Bedrooms5 > 0", "UseType = 'Residential'", "Roll_RealEstateExemp > 0"];

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 添加要素图层 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;
      }

      // Event listener
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

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

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], // Longitude, latitude
        zoom: 12
      });

      // 创建具有过滤表达式的 UI
      const sqlExpressions = ["选择SQL查询条件...", "Roll_LandValue < 200000", "TaxRateArea = 10853", "Bedrooms5 > 0", "UseType = 'Residential'", "Roll_RealEstateExemp > 0"];

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 添加要素图层 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;
      }

      // Event listener
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

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

Add line.
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

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

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 添加要素图层 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;
      }

      // Event listener
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

验证是否已创建 select 元素。

创建待过滤的要素图层

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

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

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

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

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 将要素图层添加至地图，其中所有要素均在客户端可见 (无过滤器)
      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;
      }

      // Event listener
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

应用 SQL 表达式

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

定义 setFeatureLayerFilter 函数，其参数为 expression 。设置 definitionExpression 以使用 expression 过滤要素图层。

Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

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

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 将要素图层添加至地图，其中所有要素均在客户端可见 (无过滤器)
      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);

      // 服务器端过滤器
      function setFeatureLayerFilter(expression) {
        featureLayer.definitionExpression = expression;
      }

      // Event listener
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

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

Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="GeoScene JavaScript 教程: Filter a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: Filter a feature layer with SQL (JSAPI)</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
</head>

<script>
  require([
      "geoscene/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map,MapView,FeatureLayer) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" // Basemap layer service
      });

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

      // UI
      const selectFilter = document.createElement("select");
      selectFilter.setAttribute("class", "esri-widget esri-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);
      });

      view.ui.add(selectFilter, "top-right");

      // 添加要素图层 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);

      // 服务器端过滤器
      function setFeatureLayerFilter(expression) {
        featureLayer.definitionExpression = expression;
      }

      // 事件监听器
      selectFilter.addEventListener('change', function (event) {
        setFeatureLayerFilter(event.target.value);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序

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

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

下一步是什么？

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

上一主题查询要素图层 (空间)下一主题编辑要素数据

解决方案

在 CodePen 中查看

估计时间

10 分钟