要素图层范围查询属性arcgis api for js

此篇博客为转载，感谢博主，原文链接：https://www.waitig.com/%E8%A6%81%E7%B4%A0%E5%9B%BE%E5%B1%82%E8%8C%83%E5%9B%B4%E6%9F%A5%E8%AF%A2%E5%B1%9E%E6%80%A7.html。

要素图层范围查询属性

本文主要通过Query和FeatureLayer.setDefinitionExpression来对要素图层进行范围查询属性。查询结果由FeatureTable来显示，且形状也可以显示在地图上。

---

有时候，我们往往需要对要素图层某个范围的属性进行查询。可以通过SQL查询语句，赋值给FeatureLayer.setDefinitionExpression，然后通过FeatureTable来显示查询结果，同时地图上只显示查询要素图。 
地图上的要素和表格的要素是关联的，选择其中任何一个，另一个也会显示被选中要素：

 

1.首先，定义地图、要素图层、要素表格。

//底图定义
        var map = new Map("map",{
          basemap: "topo", 
          center:[102.96, 31.65],
           zoom:10
        });
        //要素图层定义
       var  myFeatureLayer = new esri.layers.FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/0",{                  
            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,    //按需加载feature
            outFields: ["*"],
            opacity:0.5,
            visible: true,
            id: "fLayer"
           });
       // 要素表格定义
       var myFeatureTable = new FeatureTable({
            featureLayer : myFeatureLayer,
            map : map,
            editable: true,
            syncSelection: true,
            showRelatedRecords: true,
            showAttachments: true,
            // outfields 显示要素属性
            outFields: ["Subbasin","mydb.DBO.subs2.Area","Len1", "Elev", "ElevMin", "ElevMax"],
          }, 'myTableNode');

　　2.然后，添加查询条件，查询按钮。

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height: 40px;">
            子流域序号：<input id="submin" />to
            <input id="submax" /><br>
            面积范围：
            <input id="areamin" />to
            <input id="areamax" />
            <button id="sqlque">
                查询</button>
        </div>

　　3.最后，查询条件的读入，查询设置。关键点：移除之前的要素图，判断查询条件是否为空，添加新的要素图，更新要素表格。

myFeatureTable.startup(); //首先要素表格运行，不能放在点击函数里面，只需要refresh()在点击函数里。
 on(dom.byId("sqlque"), "click", function (e) {
        map.removeLayer(myFeatureLayer);//移除之前的要素图层查询结果
        //范围查询
        var submin = dom.byId("submin").value;//子流域序号最小值
        var submax = dom.byId("submax").value;//最大值
        //判断输入是否为零，若为零则自动设定范围
        if (submin==""){submin=0;} //最小值
        if (submax==""){submax=100;} //最大值
        var sql_sub="Subbasin >="+submin+"and Subbasin<="+submax;  //子流域序号SQL查询字符串
        var areamin = dom.byId("areamin").value;//面积最小值
        var areamax = dom.byId("areamax").value;//最大值
        //判断输入是否为零，若为零则自动设定范围
        if (areamin==""){areamin=0;}
        if (areamax==""){areamax=100000;} 
        var sql_area="Area >="+areamin+"and Area<="+areamax;    //面积SQL查询字符串
        var sql_r=  sql_sub+"and "+sql_area;      //子流域和面积查询字符串连接 注意and后面有空格！
         myFeatureLayer.setDefinitionExpression(sql_r); //使用setDefinitionExpression来进行查询
           //设置被选中标志参数
          var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color("blue"), 1),
            new Color("blue"));
          myFeatureLayer.setSelectionSymbol(selectionSymbol); //设置要素图层被选中标志

          // listen to featurelayer click event to handle selection 
          // from layer to the table. 
          // when user clicks on a feature on the map, the corresponding 
          // record will be selected in the table.   
          //监听要素图层点击事件，并传送相应参数给要素表格
          //当地图中要素被点击选中时，与之相关的属性记录也会在要素表格中被选中
          myFeatureLayer.on("click", function(evt) {
           var idProperty = myFeatureLayer.objectIdField;
           var feature, featureId, query1;
           if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
               feature = evt.graphic; //获取要素形状
               featureId = feature.attributes[idProperty]; //获取要素ID
               //实例化查询参数
               query1 = new Query();  
               query1.returnGeometry = false;  
               query1.objectIds = [featureId];
               query1.where = "1=1";  //取查询中的全部数据
               myFeatureLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW);
           }
         });
         map.addLayer(myFeatureLayer); //添加要素查询结果图层

         myFeatureTable.refresh(); //更新要素表格

          // listen to show-attachments event
          myFeatureTable.on("show-attachments", function(evt){
            console.log("show-attachments event - ", evt);
          });

          // listen to show-related-records event
          myFeatureTable.on("show-related-records", function(evt){
            console.log("show-related-records event - ", evt);
          });
      })

　　全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FeatureTable - related records</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.18/"></script>
    <style>
        html, body, #map
        {
             100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/tasks/query",
      "esri/geometry/Extent",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/Color",
      "esri/map",      
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/number",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, Query, Extent, SimpleFillSymbol, SimpleLineSymbol, Color, Map,
      domConstruct, dom, dojoNum, parser, ready, on,lang,registry, Button, ContentPane, BorderContainer, TextBox
    ) {
      parser.parse(); //解译器解译
      ready(function(){        
      //底图定义
        var map = new Map("map",{
          basemap: "topo", 
          center:[102.96, 31.65],
           zoom:10
        });
        //要素图层定义
       var  myFeatureLayer = new esri.layers.FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/0",{                  
            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,    //按需加载feature
            outFields: ["*"],
            opacity:0.5,
            visible: true,
            id: "fLayer"
           });
       // 要素表格定义
       var myFeatureTable = new FeatureTable({
            featureLayer : myFeatureLayer,
            map : map,
            editable: true,
            syncSelection: true,
            showRelatedRecords: true,
            showAttachments: true,
            // outfields 显示要素属性
            outFields: ["Subbasin","mydb.DBO.subs2.Area","Len1", "Elev", "ElevMin", "ElevMax"],
          }, 'myTableNode');
          myFeatureTable.startup(); //首先表格运行，不能放在点击函数里面，只需要refresh()在点击函数里。
          //点击函数，进行查询
        on(dom.byId("sqlque"), "click", function (e) {
        map.removeLayer(myFeatureLayer);//移除之前的要素图层查询结果
        //范围查询
        var submin = dom.byId("submin").value;//子流域序号最小值
        var submax = dom.byId("submax").value;//最大值
        //判断输入是否为零，若为零则自动设定范围
        if (submin==""){submin=0;} //最小值
        if (submax==""){submax=100;} //最大值
        var sql_sub="Subbasin >="+submin+"and Subbasin<="+submax;  //子流域序号SQL查询字符串
        var areamin = dom.byId("areamin").value;//面积最小值
        var areamax = dom.byId("areamax").value;//最大值
        //判断输入是否为零，若为零则自动设定范围
        if (areamin==""){areamin=0;}
        if (areamax==""){areamax=100000;} 
        var sql_area="Area >="+areamin+"and Area<="+areamax;    //面积SQL查询字符串
        var sql_r=  sql_sub+"and "+sql_area;      //子流域和面积查询字符串连接 注意and后面有空格！
         myFeatureLayer.setDefinitionExpression(sql_r); //使用setDefinitionExpression来进行查询
           //设置被选中标志参数
          var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color("blue"), 1),
            new Color("blue"));
          myFeatureLayer.setSelectionSymbol(selectionSymbol); //设置要素图层被选中标志

          // listen to featurelayer click event to handle selection 
          // from layer to the table. 
          // when user clicks on a feature on the map, the corresponding 
          // record will be selected in the table.   
          //监听要素图层点击事件，并传送相应参数给要素表格
          //当地图中要素被点击选中时，与之相关的属性记录也会在要素表格中被选中
          myFeatureLayer.on("click", function(evt) {
           var idProperty = myFeatureLayer.objectIdField;
           var feature, featureId, query1;
           if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
               feature = evt.graphic; //获取要素形状
               featureId = feature.attributes[idProperty]; //获取要素ID
               //实例化查询参数
               query1 = new Query();  
               query1.returnGeometry = false;  
               query1.objectIds = [featureId];
               query1.where = "1=1";  //取查询中的全部数据
               myFeatureLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW);
           }
         });
         map.addLayer(myFeatureLayer); //添加要素查询结果图层

         myFeatureTable.refresh(); //更新要素表格

          // listen to show-attachments event
          myFeatureTable.on("show-attachments", function(evt){
            console.log("show-attachments event - ", evt);
          });

          // listen to show-related-records event
          myFeatureTable.on("show-related-records", function(evt){
            console.log("show-related-records event - ", evt);
          });
      })
      });

    });
    </script>
</head>
<body class="claro esri">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
        style=" 100%; height: 100%;">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height: 40px;">
            子流域序号：<input id="submin" />to
            <input id="submax" /><br>
            面积范围：
            <input id="areamin" />to
            <input id="areamax" />
            <button id="sqlque">
                查询</button>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true"
            style="height: 60%">
            <div id="map">
            </div>
        </div>
        <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true"
            style="height: 40%">
            <div id="myTableNode">
            </div>
        </div>
    </div>
</body>
</html>

　　再次感谢发这篇文章的博主，此案例仅供学习参考！！！