當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
ArcGIS API For JS之空间查询和属性查询
生活随笔
收集整理的這篇文章主要介紹了
ArcGIS API For JS之空间查询和属性查询
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
說實(shí)在真是無聊，雖然很想干一些東西但是悲哀的是沒有平臺，前幾天看到一個(gè)關(guān)于GIS開發(fā)的文章，這一行真的很容易被人取代，知識更新太快了，GIS并不像其他前端開發(fā)，不太注重用戶體驗(yàn)，因?yàn)榇蠖喽际钦糠值捻?xiàng)目，但是如果不做GIS開發(fā)和計(jì)算機(jī)的比我們的優(yōu)勢又在哪，出路在何方，唉不說了，不說了，開車開車。
一、概述
查詢分為屬性查詢和空間查詢類
屬性查詢：QueryTask,FindTask（只能屬性。多個(gè)圖層）
空間查詢：IdentifyTask（多個(gè)圖層），QueryTask（單個(gè)圖層）
二、屬性查詢（高亮顯示）
//屬性查詢function attrFinfd() {var findParameters = new FindParameters();findParameters.returnGeometry = true;findParameters.layerIds = [0, 1, 2, 3];findParameters.searchFields = ["name"];findParameters.searchText = $("#serach").val();findTask.execute(findParameters, showResult);};//查詢工具var findTask = new FindTask(serverUrl)//屬性查詢渲染函數(shù)function showResult(result) {map.graphics.clear();//線符號var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([0, 0, 255]), 3);//面符號var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);if (result.length == 0) {alert("未查詢到任何信息");return;}else {for (var i = 0; i < result.length; i++) {//獲得圖形graphicvar graphic = result[i].feature;console.log(graphic);console.log(graphic.geometry.cache);//console.log(graphic.geometry.cache._extent);//賦予相應(yīng)的符號graphic.setSymbol(lineSymbol);//將graphic添加到地圖中，從而實(shí)現(xiàn)高亮效果map.graphics.add(graphic);}}}//屬性查詢$("#attrSerach").click(function () {if ($("#serach").val() == null) {alert("請輸入查詢條件");return;}attrFinfd();});三、空間查詢（高亮顯示并彈出查詢屬性信息）
//空間查詢function identifyTask(geometry) {//定義空間查詢對象，注意他的參數(shù)是整個(gè)地圖服務(wù)，而不是單個(gè)圖層var identifyTask = new IdentifyTask("http://localhost:6080/arcgis/rest/services/Test/Qingdao/MapServer");//定義空間查詢參數(shù)對象var params = new IdentifyParameters();//容差params.tolerance = 5;//是否返回幾何信息params.returnGeometry = true;//空間查詢的圖層params.layerIds = [0,1,2,3];//空間查詢的條件params.layerOption = IdentifyParameters.LAYER_OPTION_ALL;params.width = map.width;params.height = map.height;//空間查詢的幾何對象params.geometry = geometry;params.mapExtent = map.extent;//執(zhí)行空間查詢identifyTask.execute(params, showQueryResult); }//空間查詢展示function showQueryResult(idResults) {//創(chuàng)建線符號var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);//創(chuàng)建面符號var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);if (idResults.length > 0) {var htmls = "<table style=\"width: 100%\">";htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td> 圖層 </td><td> 名 稱</td></tr>";for (var i = 0; i < idResults.length; i++) {var result = idResults[i];//獲得圖形graphicvar graphic = result.feature;//設(shè)置圖形的符號graphic.setSymbol(fill);var namevalue = result.feature.attributes.Name;if (i % 2 == 1) {htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td>" +result.layerName + "</td><td>" + namevalue + "</td></tr>";}else {htmls = htmls + "<tr><td>" + result.layerName + "</td><td>"+ namevalue + "</td></tr>";}map.graphics.add(graphic);}htmls = htmls + "</table>";document.getElementById("divShowResult").innerHTML = htmls;$("#divShowResult").show();}else {document.getElementById("divShowResult").innerHTML = "";$("#divShowResult").show();}}四、全部源碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>查詢</title><link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css"><script src="https://js.arcgis.com/3.25/"></script><script src="../Scripts/jsapi_vsdoc12_v38.js"></script><script src="../Scripts/jquery-1.7.1.js"></script><style type="text/css">#map{width: 100%;height: 1000px;}#divShowResult{display:none;position: absolute;z-index:100;top:30px;right:30px}</style></head> <body><span>輸入要查詢的名稱</span><input id="serach" type="text" name="name1" value=" " /><input type="button" name="name" id="attrSerach" value="屬性查詢 " /><input type="button" name="name" id="spaceSearch" value="空間查詢 " /><input type="button" name="name" id="del" value="清除 " /><div id="map"></div><div id="divShowResult"></div><script type="text/javascript">require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/tasks/FindTask","esri/tasks/FindParameters","esri/tasks/IdentifyTask","esri/tasks/IdentifyParameters","esri/toolbars/draw","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/geometry/Extent","esri/graphic","dojo/on",], function (Map, ArcGISDynamicMapServiceLayer, FindTask, FindParameters, IdentifyTask, IdentifyParameters,Draw, SimpleLineSymbol, SimpleFillSymbol, Extent, Graphic, on) {var map = new Map("map", {logo: false,center: [116.43228121152976, 40.20122178384614],});var serverUrl = "http://localhost:6080/arcgis/rest/services/Test/Qingdao/MapServer";var dyLayer = new ArcGISDynamicMapServiceLayer(serverUrl);map.addLayer(dyLayer);//繪圖工具var draw = new Draw(map); //屬性查詢function attrFinfd() {var findParameters = new FindParameters();findParameters.returnGeometry = true;findParameters.layerIds = [0, 1, 2, 3];findParameters.searchFields = ["name"];findParameters.searchText = $("#serach").val();findTask.execute(findParameters, showResult);};//查詢工具var findTask = new FindTask(serverUrl)//屬性查詢渲染函數(shù)function showResult(result) {map.graphics.clear();//線符號var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([0, 0, 255]), 3);//面符號var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);if (result.length == 0) {alert("未查詢到任何信息");return;}else {for (var i = 0; i < result.length; i++) {//獲得圖形graphicvar graphic = result[i].feature;console.log(graphic);console.log(graphic.geometry.cache);//console.log(graphic.geometry.cache._extent);//賦予相應(yīng)的符號graphic.setSymbol(lineSymbol);//將graphic添加到地圖中，從而實(shí)現(xiàn)高亮效果map.graphics.add(graphic);}}}//屬性查詢$("#attrSerach").click(function () {if ($("#serach").val() == null) {alert("請輸入查詢條件");return;}attrFinfd();});//空間查詢$("#spaceSearch").click(function () {draw.activate(esri.toolbars.Draw.POLYGON);});//繪圖draw.on("draw-complete", function (resultDraw) {//得到繪圖圖形var geometry = resultDraw.geometry;//關(guān)閉繪圖工具draw.deactivate();//執(zhí)行空間查詢identifyTask(geometry);});//清除$("#del").click(function () {$("#divShowResult").html = "";$("#divShowResult").hide();map.graphics.clear();});//空間查詢function identifyTask(geometry) {//定義空間查詢對象，注意他的參數(shù)是整個(gè)地圖服務(wù)，而不是單個(gè)圖層var identifyTask = new IdentifyTask("http://localhost:6080/arcgis/rest/services/Test/Qingdao/MapServer");//定義空間查詢參數(shù)對象var params = new IdentifyParameters();//容差params.tolerance = 5;//是否返回幾何信息params.returnGeometry = true;//空間查詢的圖層params.layerIds = [0,1,2,3];//空間查詢的條件params.layerOption = IdentifyParameters.LAYER_OPTION_ALL;params.width = map.width;params.height = map.height;//空間查詢的幾何對象params.geometry = geometry;params.mapExtent = map.extent;//執(zhí)行空間查詢identifyTask.execute(params, showQueryResult); }//空間查詢展示function showQueryResult(idResults) {//創(chuàng)建線符號var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);//創(chuàng)建面符號var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);if (idResults.length > 0) {var htmls = "<table style=\"width: 100%\">";htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td> 圖層 </td><td> 名 稱</td></tr>";for (var i = 0; i < idResults.length; i++) {var result = idResults[i];//獲得圖形graphicvar graphic = result.feature;//設(shè)置圖形的符號graphic.setSymbol(fill);var namevalue = result.feature.attributes.Name;if (i % 2 == 1) {htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td>" +result.layerName + "</td><td>" + namevalue + "</td></tr>";}else {htmls = htmls + "<tr><td>" + result.layerName + "</td><td>"+ namevalue + "</td></tr>";}map.graphics.add(graphic);}htmls = htmls + "</table>";document.getElementById("divShowResult").innerHTML = htmls;$("#divShowResult").show();}else {document.getElementById("divShowResult").innerHTML = "";$("#divShowResult").show();}}})</script> </body> </html>五、效果圖
六、總結(jié)
空間查詢的展示參考別人的輸出，感覺很丑也不實(shí)用，可以通過分頁控件進(jìn)行展示，更好看點(diǎn)，本來想通過查詢并縮放到該要素位置，但是一直沒法獲取到extent，雖然我就在那，但是就是沒法獲取，好像變成了私有的，但是花了還久都沒法獲取，能把人氣死，還有QueryTask,FindTask，IdentifyTask傳入的都是整個(gè)地圖服務(wù)，不是單個(gè)圖層，至于什么地圖服務(wù)打開server自己看
總結(jié)
以上是生活随笔為你收集整理的ArcGIS API For JS之空间查询和属性查询的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GAMS与MATLAB的数据交互
- 下一篇： javascript时间戳转日期格式以及