上篇介紹了如何使用要素圖層范圍查詢屬性，實際運用時有些無法滿足我的需求。於是我做了如下的一些優化：
1、根據屬性名字可以進行模糊查詢：即寫一個博即可搜尋到與含博的所有字段
var sql_name="name Like '%"+name+"%'";//將需要模糊查詢的字段，按格式書寫
2、查詢不再是並查詢。而是既可以單獨查詢又可以並查詢。
if (submin==""||submax=="") {
sql_r=sql_name;
}
else if(name==""){
sql_r=sql_gdp;
}
else{
sql_r=sql_gdp+"and "+sql_name;
}
myFeatureLayer.setDefinitionExpression(sql_r);
3、進入后便可以點擊屬性表，使之高亮顯示。
function loadTable(){
myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/%E6%9C%80%E5%90%8E%E7%9A%84%E5%9B%BE%E5%B1%82/%E4%B8%9D%E7%BB%B8%E4%B9%8B%E8%B7%AF/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id: "fLayer"
});
myFeatureLayer.setSelectionSymbol(symbol);
map.addLayer(myFeatureLayer);
myFeatureTable = new FeatureTable({
featureLayer : myFeatureLayer,
map : map,
showAttachments: true,
// only allows selection from the table to the map
syncSelection: true,
zoomToSelection: true,
gridOptions: {
allowSelectAll: true,
allowTextSelection: true,
},
editable: true,
outFields: ["name","description","grp2015"],
fieldInfos: [
{
name: 'name',
alias: '城市名字',
editable: false
},
{
name: 'description',
alias: '描述',
},
{
name: 'grp2015',
alias: '經濟'
},
],
}, 'myTableNode');
myFeatureTable.startup();
全部代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>FeatureTable Formatting</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<script src="https://js.arcgis.com/3.21/"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
html, body, #map {
width: 100%; height: 100%; margin: 0; padding: 0; } .claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child { border: 0 #b5bcc7 solid; } } </style> <script> require([ "esri/layers/FeatureLayer", "esri/dijit/FeatureTable", "esri/geometry/Extent", "esri/symbols/SimpleMarkerSymbol", "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, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map, domConstruct, dom, dojoNum, parser, ready, on,lang, registry, Button, ContentPane, BorderContainer, TextBox ) { var selectionSymbol; parser.parse(); var symbol= new esri.symbol.SimpleMarkerSymbol(); symbol.setSize(35); symbol.setColor(new dojo.Color([250,128,114,0.3])); ready(function(){ var sr = new esri.SpatialReference({ wkid: 4326 }); var startExtent = new esri.geometry.Extent(-88.27, 17.47, -88.16, 17.54, sr); map = new esri.Map("map", { logo: false, center: [83.75, 33.75], zoom: 3 // sliderPosition:"top-right" }); map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer")); map.on("load", loadTable); var myFeatureLayer;var myFeatureTable; function loadTable(){ myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/%E6%9C%80%E5%90%8E%E7%9A%84%E5%9B%BE%E5%B1%82/%E4%B8%9D%E7%BB%B8%E4%B9%8B%E8%B7%AF/FeatureServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], visible: true, id: "fLayer" }); myFeatureLayer.setSelectionSymbol(symbol); map.addLayer(myFeatureLayer); myFeatureTable = new FeatureTable({ featureLayer : myFeatureLayer, map : map, showAttachments: true, zoomToSelection: true, gridOptions: { allowSelectAll: true, allowTextSelection: true, }, editable: true, outFields: ["name","description","grp2015"], fieldInfos: [ { name: 'name', alias: '城市名字', editable: false }, { name: 'description', alias: '描述', }, { name: 'grp2015', alias: '經濟' }, ], }, 'myTableNode'); myFeatureTable.startup(); // listen to show-attachments event myFeatureTable.on("show-attachments", function(evt){ console.log("show-attachments event - ", evt); }); } on(dom.byId("sqlque"), "click", function (e) { if ($('#bot').is(":hidden")) {$('#bot').show();} else{$('#bot').hide();} map.removeLayer(myFeatureLayer); var sql_r; var submin = dom.byId("submin").value;//序號最小值 var submax = dom.byId("submax").value;//最大值 //判斷輸入是否在范圍內 if (submin<0||submin>40000){alert("請輸入最小值");} //最小值 if (submax<0||submax>40000){alert("請輸入最大值");} //最大值 var sql_gdp="grp2015 >="+submin+"and grp2015<="+submax; //序號SQL查詢字符串 var name = dom.byId("name_test").value;//name的值 var sql_name="name Like '%"+name+"%'"; if (submin==""||submax=="") { sql_r=sql_name; } else if(name==""){ sql_r=sql_gdp; } else{ sql_r=sql_gdp+"and "+sql_name; } myFeatureLayer.setDefinitionExpression(sql_r); myFeatureLayer.setSelectionSymbol(symbol); 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[objectid]; //獲取要素ID //實例化查詢參數 query1 = new Query(); query1.returnGeometry = true; query1.objectIds = [featureId]; query1.where = "1=1"; //取查詢中的全部數據 myFeatureLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW); } }); map.addLayer(myFeatureLayer); //添加要素查詢結果圖層 myFeatureTable.refresh(); //更新要素表格 }); }); }); </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;"> GDP：<input id="submin" />to <input id="submax" /><br> name： <input id="name_test" /> <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>
本文鏈接：http://www.cnblogs.com/HuangDaDa/p/7379956.html