當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

基于ArcGIS JS API 的点击查询功能

發布時間：2025/3/21 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了基于ArcGIS JS API 的点击查询功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

應用場景：

???????? 點擊地圖要素，彈出信息窗，左邊顯示點擊要素的圖層樹（因為是查詢的多個圖層），右邊顯示當前所選要素的所有屬性數據，可通過樹插件實現動態控制要顯示的要素。如果不想把屬性表里面的所有屬性全部顯示出來(因為包含一些ObjectId之類的無用字段)，可以與后臺數據庫交互，獲取需要顯示的字段。

效果圖：

詳細代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>點擊查詢</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.25/3.25/dijit/themes/tundra/tundra.css"><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" /><script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.25/3.25/init.js"></script><style type="text/css">*{margin:0px;padding:0px;}html,body{height:100%;width:100%;position: relative;overflow: hidden;}</style><script type="text/javascript">require(['dojo/on',"dojo/dom","dojo/dom-attr","dojo/_base/declare","dojo/_base/lang","dojo/_base/array",'esri/map','esri/layers/ArcGISDynamicMapServiceLayer',"dojo/_base/xhr","esri/InfoTemplate","esri/dijit/InfoWindow","esri/tasks/IdentifyTask","esri/tasks/IdentifyParameters","esri/tasks/IdentifyResult","esri/tasks/QueryTask","esri/tasks/query","esri/tasks/FeatureSet","dojox/collections/Dictionary","dojo/data/ItemFileReadStore","dijit/tree/ForestStoreModel","dijit/Tree","esri/symbols/SimpleLineSymbol","esri/geometry/Polyline","esri/geometry/Polygon","esri/geometry/geometryEngine","esri/symbols/SimpleMarkerSymbol","esri/Color","esri/graphic",],function(on,dom,domAttr,declare,lang,arrayUtil,Map,ArcGISDynamicMapServiceLayer,xhr,InfoTemplate,InfoWindow,IdentifyTask,IdentifyParameters,IdentifyResult,QueryTask,Query,FeatureSet,Dictionary,ItemFileReadStore,ForestStoreModel,Tree,SimpleLineSymbol,Polyline,Polygon,geometryEngine,SimpleMarkerSymbol,Color,Graphic) {var map = new Map('mapDiv');var layer1 = new ArcGISDynamicMapServiceLayer("https://localhost:6443/arcgis/rest/services/SampleWorldCities/MapServer");map.addLayer(layer1);var clickQuery ,_clickUrl,_clickTree;var _clickIds;pointQueryClick();map.on("click",function(evt){if(clickQuery){identifyQuery(_clickUrl, _clickIds,evt.mapPoint, function(results, map) {if (results.length > 0) {// 利用hashtable進行對應的生成，獲取相同名稱的屬性值，并放到同一個key對應的value中var hashtable = new Dictionary();// 這里生成新的數組，獲取名字相同的圖層名for (var i = 0; i < results.length; i++) {if (!hashtable.containsKey(results[i].layerName)) {hashtable.add(results[i].layerName,[results[i].feature]);} else {var arrayFeature = hashtable.item(results[i].layerName);arrayFeature.push(results[i].feature);}addGraphicsToMap(results[i].feature.geometry,null,null,null,null,null);}if (_clickTree) {_clickTree.destroy();}handler_click_query(hashtable, evt);} else {alert("當前點未查詢到任何元素");}});}});/*** 點擊查詢*/function pointQueryClick(){_clickUrl = "https://localhost:6443/arcgis/rest/services/SampleWorldCities/MapServer";_clickIds = [0,1,2];clickQuery = true;}function identifyQuery(url, layerIds, geometry,bufferCallback) {var identifyTask = new IdentifyTask(url);var identifyParams = new IdentifyParameters();identifyParams.returnGeometry = true;identifyParams.tolerance = 5;identifyParams.layerIds = layerIds;identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;identifyParams.geometry = geometry;identifyParams.width = map.width;identifyParams.height = map.height;identifyParams.mapExtent = map.extent;identifyParams.spatialReference = map.spatialReference;identifyTask.execute(identifyParams, lang.hitch(this,function(results) {if (lang.isFunction(bufferCallback)) {bufferCallback(results, map);}}), function(err) {});}/*** 處理點擊查詢 hashtable key 為圖層名稱 value 為 feature數組*/function handler_click_query (hashtable, evt) {var table_tree = "<div style=\"height:280px;overflow:hidden;\"><div id=\"pointQueryResult\" style=\"padding-left:0px;overflow:visible\" > <table width=\"375\" cellpadding=\"0\" style=\"border-width: 1px;border-color: #666666;border-collapse: collapse;\"><tr><th style=\"border:1px solid #666666;\">圖層列表</th><th style=\"border:1px solid #666666;\">詳細信息</th></tr><tr valign=\"top\">"+ "<td style=\"width:140px;height:242px;vertical-align: top;border:1px solid #666666;\">"+ "<div id=\"showLayerResult\" style=\"overflow:auto;width:100%;height:100%;margin:0px;padding:0px;\">";var treeData = [];hashtable.forEach(function(entry) {var item = {};item.id = entry.key;item.name = entry.key;item.type = "test";item.children = [];treeData.push(item);for (var i = 0; i < entry.value.length; i++) {var featureId = entry.value[i].attributes['FID']? entry.value[i].attributes['FID']: entry.value[i].attributes['OBJECTID'];item.children.push({_reference : entry.key+ featureId});treeData.push({id : entry.key + featureId,name : featureId,type : "feature"});}});var data = {identifier : 'id',label : 'name',items : treeData};var store = new ItemFileReadStore({data : data});var treeModel = new ForestStoreModel({store : store,query : {type : "test"},childrenAttrs : ["children"]});table_tree += "<div id='treeThree'></div>";table_tree += "</div>";table_tree += "</div>";table_tree += "<td style=\"width:290px;height:245px;vertical-align: top;border: 1px solid #666666;\"><div style=\"overflow:auto;width:100%;height:100%;margin:0px;padding:0px;\" id='show_panel_attributes'>";table_tree += "</div></td></tr></table><div></div></div></div><div style=\"display：inline-block\"><input id=\"errorInfo\" style=\"display:none;\" type=\"button\" value=\"錯誤信息\"/><input id=\"errorSub\" style=\"float: right; display: none;\" type=\"button\" value=\"錯誤上報\"/></div>";map.infoWindow.setTitle("點擊選擇查詢");map.infoWindow.setContent(table_tree);var tree = new Tree({model : treeModel,autoExpand : true,showRoot : false}, "treeThree");tree.startup();tree.on("click", function(item, node, evt) {// 獲取當前點擊的tree的id值if (!node.hasChildren()) {// 判斷有沒有子節點var selectId = item.id[0];// 當前的objectidvar selectName = item.name[0];var parentId = node.getParent(selectId).item.id[0];// 圖層名稱var featureArray = hashtable.item(parentId);for (var i = 0; i < featureArray.length; i++) {if (selectName == (featureArray[i].attributes['FID'] ? featureArray[i].attributes['FID']: featureArray[i].attributes['OBJECTID'])) {// 然后調用對應的單擊事件方法var content = _doFeatureForClickQuery(featureArray[i]);domAttr.set('show_panel_attributes','innerHTML', content);break;}}}});tree.on("load", function() {var childrenArray = tree.rootNode.getChildren();if (childrenArray.length > 0) {var key = childrenArray[0].item.id[0];var featureArray = hashtable.item(key);if (featureArray.length > 0) {var content = _doFeatureForClickQuery(featureArray[0]);domAttr.set('show_panel_attributes','innerHTML', content);}}});_clickTree = tree;map.infoWindow.resize(400, 360);map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));}/*** 點擊查詢展示屬性表里的所有字段*/function _doFeatureForClickQuery (feature) {var contents = "";contents += "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse;\">";var flag = 0;for (var p in feature.attributes) {if (p.toString().toLowerCase().indexOf('shape') != -1|| p.toString().toLowerCase().indexOf('objectid') != -1|| p.toString().toLowerCase().indexOf('enabled') != -1)continue;contents += "<tr>";if (flag == 0) {contents += "<td height=\"20\" width=\"70\" style=\"border-bottom:1px solid #666666;border-right:1px solid #666666;text-align:right;\">";} else {contents += "<td height=\"20\" width=\"70\" style=\"border-top:1px solid #666666;border-bottom:1px solid #666666;border-right:1px solid #666666;text-align:right;\">";}contents += p;contents += "</td>";if (flag == 0) {contents += "<td width=\"125\" style=\"border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;padding-left:2px;\">";} else {contents += "<td width=\"125\" style=\"border:1px solid #666666;padding-left:2px;\">";}flag++;contents += feature.attributes[p].toString().toLowerCase() == "null"? "": feature.attributes[p];contents += "</td>";contents += "</tr>";}contents += "</table>";return contents;}function addGraphicsToMap (geometry) {var symbol = null;switch (geometry.type) {case "point" :symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255, 0, 0]), 1),new Color([0, 255, 0, 0.25]));break;case "polyline" :symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.8]), 4);break;}var _graphic = new Graphic(geometry,symbol);map.graphics.add(_graphic);}})</script> </head> <body class="tundra"><div id="mapDiv" style="float:left;width: 100%;height: 100%;"></div> </body> </html>

上面的代碼中是把屬性表中所有的屬性全部都顯示出來了，要實現控制顯示字段的話可自行修改。主要用到dojo 里面的xhr。下面的代碼可以參考一下：

要顯示指定字段的話，其實跟上面的doFeatureForClickQuery差不多，無非就是多了個字段名的比較。

總結

以上是生活随笔為你收集整理的基于ArcGIS JS API 的点击查询功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：通过Easy-UI 树插件实现ArcG
下一篇： Mybatis报错 TooManyRes