上篇介绍了如何使用要素图层范围查询属性,实际运用时有些无法满足我的需求。于是我做了如下的一些优化:1、根据属性名字可以进行模糊查询:即写一个博即可搜寻到与含博的所有字段var sql_name="name Like '%"+name+"%&# ...
上篇介绍了如何使用要素图层范围查询属性,实际运用时有些无法满足我的需求。于是我做了如下的一些优化:
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='/images/loading.gif' data-original="https://js.arcgis.com/3.21/"></script> <script src='/images/loading.gif' data-original="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 > <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" > <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" > 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" > <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>
本文链接
原标题:要素图层范围查询属性arcgis api for js(featuretable根据上篇的优化)原创
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。