此篇博客為轉載，感謝博主，原文鏈接：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
{
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 class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="width: 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>
再次感謝發這篇文章的博主，此案例僅供學習參考！！！