要素图层范围查询属性arcgis api for js（featuretable根据上篇的优化）原创
上篇介绍了如何使用要素图层范围查询属性，实际运用时有些无法满足我的需求。于是我做了如下的一些优化：
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
