ArcGIS api for javascript——查找任务-在地图上查找要素

描述

本例展示了如何使用查找任务搜索数据。本例在地图上用图表显示结果并用 DojoX的grid格式化结果为表格样式。

FindTask构造函数需要一个ArcGIS Server地图服务的URL。本例使用ESRI sample server上的ESRI_StatesCitiesRivers_USA服务。

findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

FindParameters指出哪些图层和字段将被搜索。如果多个图层包含相同的字段名称（例如"NAME"）两个字段都要被搜索。注意 returnGeometry被设置为true以便结果能被显示在地图上。

findParams = new esri.tasks.FindParameters();

findParams.returnGeometry = true;

findParams.layerIds = [0,1,2];

findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];

FindParameters的searchText参数是任务将要搜索什么。这个文本来自输入框并且当单击Find按钮时被发送到execute函数。这行代码执行任务:

findTask.execute(findParams,showResults);

当任务执行结束，showResults函数循环访问FindResult里的graphics数组并增加每个图形到地图。函数也增加每个结果的属性到表格。

注意: ArcGIS JavaScript API的版本1.2使用Dojo 1.2，这有一个改良的表格DataGrid。如果移植应用到ArcGIS JavaScript API 1.2并且想要在本例中继续使用旧版的表格，在代码中查找这行:

dojo.require("dojox.grid._data.model");

修改为:

dojo.require("dojox.grid.compat._data.model");

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3   <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <meta http-equiv="X-UA-Compatible" content="IE=7" />
  6     <title>Find Task</title>
  7     <style type="text/css">
  8       @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
  9       @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/compat/_grid/Grid.css";
 10       @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/compat/_grid/tundraGrid.css";
 11       body { font-size: 0.9em;
 12                font-family: Geneva, Arial, Helvetica, sans-serif;
 13              }
 14         .heading { font-weight: bold;
 15                    padding-bottom: 0.25em;
 16                  }
 17        #grid { border: 1px solid #333;
 18                  width: 33em;
 19                  height: 30em;
 20              }
 21     </style>
 22     <script type="text/javascript">djConfig={parseOnLoad:true}</script>
 23     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
 24     <script type="text/javascript" language="Javascript">
 25       dojo.require("dojox.grid.Grid");
 26       dojo.require("dojox.grid.compat._data.model");  //Because of changes in the Dojo data grid and model you must load the comapt_data.model if using version 1.3.
 27       dojo.require("esri.map");
 28       dojo.require("esri.tasks.find");
 29
 30       var findTask, findParams, map;
 31
 32       function init() {
 33           map = new esri.Map("map");

     //对应替换成自已的服务
 34           var censusMapLayer = new

esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {id:"usa"});
 35           map.addLayer(censusMapLayer);
 36
 37           //实例化FindTask
 38           findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
 39           //FindTask的参数
 40           findParams = new esri.tasks.FindParameters();
 41           //返回Geometry
 42           findParams.returnGeometry = true;
 43           //查询的图层id
 44           findParams.layerIds = [0,1,2];
 45           //查询字段
 46           findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];
 47
 48       }
 49
 50       //根据输入的关键字进行findTask操纵
 51       function execute(searchText) {
 52         //set the search text to find parameters
 53         findParams.searchText = searchText;
 54         findTask.execute(findParams,showResults);
 55       }
 56       //显示findTask的结果
 57       function showResults(results) {
 58
 59        //清除上一次的高亮显示
 60         map.graphics.clear();
 61         var dataForGrid = [];
 62
 63         for (var i=0, j=results.length; i<j; i++) {
 64           var curFeature = results[i];
 65           var graphic = curFeature.feature;
 66
 67           //把查询到的字段信息等插入到dataForGrid
 68           var layerName = curFeature.layerName;
 69           var layerId = curFeature.layerId;
 70           var foundFieldName = curFeature.foundFieldName;
 71           var foundFieldValue = graphic.attributes[foundFieldName];
 72
 73           var attValues = [layerName,layerId,foundFieldName,foundFieldValue];
 74           dataForGrid.push(attValues);
 75           //根据类型设置显示样式
 76           switch (graphic.geometry.type) {
 77             case "point":
 78               var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
 79               break;
 80             case "polyline":
 81               var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
 82               break;
 83             case "polygon":
 84               var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
 85               break;
 86           }
 87           //设置显示样式
 88           graphic.setSymbol(symbol);
 89           //添加到graphics进行高亮显示
 90           map.graphics.add(graphic);
 91         }
 92
 93         var model = new dojox.grid.data.Table(null, dataForGrid);
 94
 95         var view1 = {
 96           cells: [
 97             [{name: 'Layer Name'},{name: 'Layer ID'},{name: 'Found Field Name'},{name: 'Found Field Value'}]
 98           ]
 99         };
100
101         var layout = [ view1 ];
102         gridWidget.setModel(model);
103         gridWidget.setStructure(layout);
104
105       }
106
107       dojo.addOnLoad(init);
108     </script>
109   </head>
110   <body class="tundra">
111     <div class="heading">Find State/City/River: <input type="text" id="searchText" value="KS" />
112     <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" /></div>
113     <div id="map" style="width:400px; height:300px; border:1px solid #000;"></div>
114     <div id="grid" dojoType="dojox.Grid" jsId="gridWidget" structure="layout"></div>
115   </body>
116 </html>

ArcGIS api for javascript——查找任务-在地图上查找要素相关推荐

ArcGIS API for javascript创建二维度地图
1.引用arcgis api for javascript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记--加载地图在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
ArcGIS API For Javascript 4.15 绘制地图：结合 Echarts 绘制地形剖面图
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
ArcGIS API For Javascript 4.15 绘制地图：在地图上绘制点和面
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
web端输出打印地图（ArcGIS api for Javascript）一、地图打印模板的制作
1.Arcgis自带模板 ArcGIS Server10.1及以后版本安装之后自带打印模板,具体位置在 ../arcgis/rest/services/Utilities/PrintingTools/ ...
ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...

ArcGIS api for javascript——查找任务-在地图上查找要素

描述

ArcGIS api for javascript——查找任务-在地图上查找要素相关推荐

最新文章

热门文章