ArcGIS API For JavaScript - QueryTask、FindTask查询 小灰灰 2021-07-26 02:53 415阅读 0赞 ### 图层要素QueryTask、FindTask查询 ### * * 一. QueryTask查询 * 二. FindTask查询 ## 一. QueryTask查询 ## **注意:只能查询单个图层。** QueryTask进行查询的地图服务并不必项加载到Map中进行显示。QueryTask的执行需要两个先决条件:一个是需要查询的图层URL、一个是进行查询的过滤条件。 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>title</title> @*加载高德地图*@ <script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad: true, packages: [{ name: "js", location: location.pathname.replace(/\/[^/]*$/, '') + '/js' }] }; </script> <script src="~/Scripts/jquery-3.3.1.js"></script> <script src="~/Scripts/init.js"></script> <link href="~/Content/esri.css" rel="stylesheet" /> <link href="~/Content/tundra.css" rel="stylesheet" /> <style> * { margin: 0; padding: 0; } html, body, #map { width: 100%; height: 100%; position: absolute; } .list { width: 12%; background-color: rgba(22, 59, 90, 0.8); color: #fff; position: absolute; } select { width: 90%; margin: 10px 5%; border-radius: 5px; height: 26px; } </style> <script> var map; //总图层 var urlMap = 'http://xxxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer' //图层要素图层 var ServiceAreaLine = 'http://xxxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer/5' require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer"], function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer) { /* code goes here */ map = new Map("map", { center: [120.075892, 31.526844], zoom: 7,//缩放等级 logo: false, //logo slider: false, //缩小按钮 }); var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 }); var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以 var baselayer2 = new gaodeLayer({layertype: "label"});//加载标注图 var baselayer3 = new gaodeLayer({ layertype: "st" });//加载卫星图 map.addLayer(baselayer1);//添加高德地图到map容器 map.addLayer(serverLayer); }); </script> </head> <body> <div id="map"></div> <div class="list"> <select id="serviceArea_Select" onchange="changeServiceArea()"></select> </div> </body> </html> <script> //将图层要素去重放入serviceArea_Select选择框中 window.onload = function () { var queryTask = new esri.tasks.QueryTask(ServiceAreaLine);//查询的图层URL var query = new esri.tasks.Query(); query.where = ("FID < 40000");//查询的过滤条件 query.returnGeometry = true; query.outFields = ["*"]; queryTask.execute(query, add_serviceArea); } function add_serviceArea(result) { console.log(result) var temp = []; var innerHtml = ""; var features = result.features; for (var i = 0; i < features.length; i++) { //数据去重 if (temp.indexOf(features[i].attributes.名称) == -1) { temp.push(features[i].attributes.名称) innerHtml += '<option>' + features[i].attributes.名称 + '</option>' } } document.getElementById('serviceArea_Select').innerHTML = '<option>---请选择---</option>' + innerHtml; } //根据选择的图层要素进行查询定位 function changeServiceArea() { map.graphics.clear(); var serverce_area = $('#serviceArea_Select option:selected').val(); var queryTask = new esri.tasks.QueryTask(ServiceAreaLine);//查询的图层URL var query = new esri.tasks.Query(); query.where = ("名称 = '" + serverce_area + "'");//查询的过滤条件 query.returnGeometry = true; query.outFields = ["*"]; queryTask.execute(query, centerServiceArea); } function centerServiceArea(featureSet) { var features = featureSet.features; for (var i = 0; i < features.length; i++) { var graphic = features[i]; var pointX = graphic.attributes.Lng; var pointY = graphic.attributes.Lat; //根据要素的类型,进行设置样式 switch (graphic.geometry.type) { case "point": var point = new esri.geometry.Point(pointX, pointY); var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25); var marker2 = new esri.Graphic(point, labelSymbol); map.graphics.add(marker2); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5); break; case "polygon": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); break; } //设置显示样式 graphic.setSymbol(symbol); //在地图中展示 map.graphics.add(graphic); } var sGeometry = graphic.geometry; //根据要素类型缩放至地图 if (sGeometry.type == "point") { //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25])); //sGrapphic.setSymbol(hsymbol); var cPoint = new esri.geometry.Point(); cPoint.x = sGeometry.x; cPoint.y = sGeometry.y; map.centerAt(cPoint); } else { var sExtent = sGeometry.getExtent(); map.setExtent(sExtent); } } </script> ## 二. FindTask查询 ## **注意:可查询单图层和跨图层数据,输入查询的图层Layers;查询的字段名字Search Fields,查询的条件 Search Text,可以查询非唯一的数据。** FindTask的url属性需要指向所查询的地图服务的REST URL,而不像QueryTask需要指定子图层的URL。 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>高速信息</title> @*加载高德地图*@ <script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad: true, packages: [{ name: "js", location: location.pathname.replace(/\/[^/]*$/, '') + '/js' }] }; </script> <script src="~/Scripts/jquery-3.3.1.js"></script> <script src="~/Scripts/init.js"></script> <link href="~/Content/esri.css" rel="stylesheet" /> <link href="~/Content/tundra.css" rel="stylesheet" /> <style> * { margin: 0; padding: 0; } html, body, #map { width: 100%; height: 100%; position: absolute; } .list { width: 12%; background-color: rgba(22, 59, 90, 0.8); color: #fff; position: absolute; } input,button,select { width: 90%; margin: 10px 5%; border-radius: 5px; height: 26px; } </style> <script> var map; var findTask, findParams, findParams2; //总图层 var urlMap = 'http://xxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer' require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters"], function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, FindTask, FindParameters) { /* code goes here */ map = new Map("map", { center: [120.075892, 31.526844], zoom: 7,//缩放等级 logo: false, //logo slider: false, //缩小按钮 }); var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 }); var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以 var baselayer2 = new gaodeLayer({layertype: "label"});//加载标注图 var baselayer3 = new gaodeLayer({ layertype: "st" });//加载卫星图 map.addLayer(baselayer1);//添加高德地图到map容器 map.addLayer(serverLayer); //实例化FindTask(输入查询的图层Layers) findTask = new FindTask(urlMap); //FindTask的参数 findParams = new FindParameters(); findParams2 = new FindParameters(); //返回Geometry findParams.returnGeometry = true; findParams2.returnGeometry = true; //查询的图层id(1:站点图层) findParams.layerIds = [2,3,4,5]; findParams2.layerIds = [0,1]; //查询的字段名字Search Fields findParams.searchFields = ["省名称","名称"]; findParams2.searchFields = ["名称"]; }); </script> </head> <body> <div id="map"></div> <div class="list"> <input id="inputText" type="text" /> <button id="btn" onclick="execute(dojo.byId('inputText').value);">站点搜索</button> <select id="serviceArea_Select" onchange="changeServiceArea()"></select> </div> </body> </html> <script> //findTask查询数据 function execute(inputText) { //inputText为搜索框的内容 findParams.searchText = inputText; //执行 findTask.execute(findParams, add_serviceArea); } function add_serviceArea(result) { console.log(result) var temp = []; var innerHtml = ""; for (var i = 0; i < result.length; i++) { var feature = result[i].feature //添加到graphics进行高亮显示 map.graphics.add(feature);; //数据去重 if (temp.indexOf(feature.attributes.名称) == -1) { temp.push(feature.attributes.名称) innerHtml += '<option>' + feature.attributes.名称 + '</option>' } } console.log(innerHtml) document.getElementById('serviceArea_Select').innerHTML = '<option>---请选择---</option>' + innerHtml; } //根据选择的图层要素进行查询定位 function changeServiceArea() { map.graphics.clear(); var serverce_area = $('#serviceArea_Select option:selected').val(); //查询条件 findParams.searchText = serverce_area; //执行 findTask.execute(findParams, centerServiceArea); } function centerServiceArea(featureSet) { for (var i = 0; i < featureSet.length; i++) { var graphic = featureSet[i].feature; var pointX = graphic.attributes.Lng; var pointY = graphic.attributes.Lat; //根据要素的类型,进行设置样式 switch (graphic.geometry.type) { case "point": var point = new esri.geometry.Point(pointX, pointY); var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25); var marker2 = new esri.Graphic(point, labelSymbol); map.graphics.add(marker2); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5); break; case "polygon": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); break; } //设置显示样式 graphic.setSymbol(symbol); //在地图中展示 map.graphics.add(graphic); } var sGeometry = graphic.geometry; //根据要素类型缩放至地图 if (sGeometry.type == "point") { //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25])); //sGrapphic.setSymbol(hsymbol); var cPoint = new esri.geometry.Point(); cPoint.x = sGeometry.x; cPoint.y = sGeometry.y; map.centerAt(cPoint); } else { var sExtent = sGeometry.getExtent(); map.setExtent(sExtent); } } </script>
还没有评论,来说两句吧...