要素图层范围查询属性arcgis api for js
生活随笔
收集整理的這篇文章主要介紹了
要素图层范围查询属性arcgis api for js
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
此篇博客為轉(zhuǎn)載，感謝博主，原文鏈接：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。
要素圖層范圍查詢屬性
本文主要通過(guò)Query和FeatureLayer.setDefinitionExpression來(lái)對(duì)要素圖層進(jìn)行范圍查詢屬性。查詢結(jié)果由FeatureTable來(lái)顯示，且形狀也可以顯示在地圖上。
有時(shí)候，我們往往需要對(duì)要素圖層某個(gè)范圍的屬性進(jìn)行查詢。可以通過(guò)SQL查詢語(yǔ)句，賦值給FeatureLayer.setDefinitionExpression，然后通過(guò)FeatureTable來(lái)顯示查詢結(jié)果，同時(shí)地圖上只顯示查詢要素圖。?
地圖上的要素和表格的要素是關(guān)聯(lián)的，選擇其中任何一個(gè)，另一個(gè)也會(huì)顯示被選中要素：
?
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, //按需加載featureoutFields: ["*"],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;">子流域序號(hào)：<input id="submin" />to<input id="submax" /><br>面積范圍：<input id="areamin" />to<input id="areamax" /><button id="sqlque">查詢</button></div>3.最后，查詢條件的讀入，查詢?cè)O(shè)置。關(guān)鍵點(diǎn)：移除之前的要素圖，判斷查詢條件是否為空，添加新的要素圖，更新要素表格。
myFeatureTable.startup(); //首先要素表格運(yùn)行，不能放在點(diǎn)擊函數(shù)里面，只需要refresh()在點(diǎn)擊函數(shù)里。on(dom.byId("sqlque"), "click", function (e) {map.removeLayer(myFeatureLayer);//移除之前的要素圖層查詢結(jié)果//范圍查詢var submin = dom.byId("submin").value;//子流域序號(hào)最小值var submax = dom.byId("submax").value;//最大值//判斷輸入是否為零，若為零則自動(dòng)設(shè)定范圍if (submin==""){submin=0;} //最小值if (submax==""){submax=100;} //最大值var sql_sub="Subbasin >="+submin+"and Subbasin<="+submax; //子流域序號(hào)SQL查詢字符串var areamin = dom.byId("areamin").value;//面積最小值var areamax = dom.byId("areamax").value;//最大值//判斷輸入是否為零，若為零則自動(dòng)設(shè)定范圍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來(lái)進(jìn)行查詢//設(shè)置被選中標(biāo)志參數(shù)var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color("blue"), 1),new Color("blue"));myFeatureLayer.setSelectionSymbol(selectionSymbol); //設(shè)置要素圖層被選中標(biāo)志// 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. //監(jiān)聽要素圖層點(diǎn)擊事件，并傳送相應(yīng)參數(shù)給要素表格//當(dāng)?shù)貓D中要素被點(diǎn)擊選中時(shí)，與之相關(guān)的屬性記錄也會(huì)在要素表格中被選中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//實(shí)例化查詢參數(shù)query1 = new Query(); query1.returnGeometry = false; query1.objectIds = [featureId];query1.where = "1=1"; //取查詢中的全部數(shù)據(jù)myFeatureLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW);}});map.addLayer(myFeatureLayer); //添加要素查詢結(jié)果圖層myFeatureTable.refresh(); //更新要素表格// listen to show-attachments eventmyFeatureTable.on("show-attachments", function(evt){console.log("show-attachments event - ", evt);});// listen to show-related-records eventmyFeatureTable.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, //按需加載featureoutFields: ["*"],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(); //首先表格運(yùn)行，不能放在點(diǎn)擊函數(shù)里面，只需要refresh()在點(diǎn)擊函數(shù)里。//點(diǎn)擊函數(shù)，進(jìn)行查詢on(dom.byId("sqlque"), "click", function (e) {map.removeLayer(myFeatureLayer);//移除之前的要素圖層查詢結(jié)果//范圍查詢var submin = dom.byId("submin").value;//子流域序號(hào)最小值var submax = dom.byId("submax").value;//最大值//判斷輸入是否為零，若為零則自動(dòng)設(shè)定范圍if (submin==""){submin=0;} //最小值if (submax==""){submax=100;} //最大值var sql_sub="Subbasin >="+submin+"and Subbasin<="+submax; //子流域序號(hào)SQL查詢字符串var areamin = dom.byId("areamin").value;//面積最小值var areamax = dom.byId("areamax").value;//最大值//判斷輸入是否為零，若為零則自動(dòng)設(shè)定范圍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來(lái)進(jìn)行查詢//設(shè)置被選中標(biāo)志參數(shù)var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color("blue"), 1),new Color("blue"));myFeatureLayer.setSelectionSymbol(selectionSymbol); //設(shè)置要素圖層被選中標(biāo)志// 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. //監(jiān)聽要素圖層點(diǎn)擊事件，并傳送相應(yīng)參數(shù)給要素表格//當(dāng)?shù)貓D中要素被點(diǎn)擊選中時(shí)，與之相關(guān)的屬性記錄也會(huì)在要素表格中被選中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//實(shí)例化查詢參數(shù)query1 = new Query(); query1.returnGeometry = false; query1.objectIds = [featureId];query1.where = "1=1"; //取查詢中的全部數(shù)據(jù)myFeatureLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW);}});map.addLayer(myFeatureLayer); //添加要素查詢結(jié)果圖層myFeatureTable.refresh(); //更新要素表格// listen to show-attachments eventmyFeatureTable.on("show-attachments", function(evt){console.log("show-attachments event - ", evt);});// listen to show-related-records eventmyFeatureTable.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;">子流域序號(hào)：<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>再次感謝發(fā)這篇文章的博主，此案例僅供學(xué)習(xí)參考！！！
轉(zhuǎn)載于:https://www.cnblogs.com/HuangDaDa/p/7357422.html
總結(jié)
以上是生活随笔為你收集整理的要素图层范围查询属性arcgis api for js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用tinyscript解一些典型算法题，
- 下一篇： VR眼镜，怎样才算性感？