你的位置:首页 > Java教程

[Java教程]要素图层范围查询属性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'" >      子流域序号:<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    {      width: 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 >  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"    >    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >      子流域序号:<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"      >      <div id="map">      </div>    </div>    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true"      >      <div id="myTableNode">      </div>    </div>  </div></body></html>

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