描述

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

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

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

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

  1. findParams = new esri.tasks.FindParameters();
  1. findParams.returnGeometry = true;
  1. findParams.layerIds = [0,1,2];
  1. findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];

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

  1. findTask.execute(findParams,showResults);

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

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

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

修改为:

  1. 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——查找任务-在地图上查找要素的更多相关文章

  1. ArcGIS API For Javascript ：如何在地图上做出点位脉冲闪烁的效果

    日常地图表达中我们通常使用的地图符号多是静态地图符号,时间久了会造成视觉审美疲劳,也没有现代感. 在这种背景下,对现有地图符号进行简单处理,即可得到色彩鲜艳,对比度强烈,活灵活现的地图表达形式. 灵感 ...

  2. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  3. ArcGIS API for JavaScript开发初探——基本地图组件使用

    1.前言 在上一篇我们已经我们已经讲述了第一个地图应用程序的HelloMap的创建过程,这一篇我们来讲述基本地图组件:Home Button.比例尺.鹰眼图的使用方法. 2.基本地图组件 在ArcGI ...

  4. Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)

    Ⅰ. 在3.X版本中,设置Map对象的 "maxScale" 和 "minScale" 属性 <!DOCTYPE html> <html> ...

  5. ArcGIS API For Javascript ：如何制作地图切换器

    大部分情况下我们开发会使用原生的地图切换器,由于每个项目的页面风格不同,业务场景不同,因此需要做一些样式不同的地图切换器. 首先可以照猫画虎,自己照着地图切换器的样式抄一个,或者看看主流的地图切换器都 ...

  6. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  7. ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

    转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...

  8. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  9. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

随机推荐

  1. windows连接投影仪后桌面画面和白板画面不一致

    windows连接投影仪后桌面画面和白板画面不一致: 一. windows 搜索: 投影仪 选择相应的效果:

  2. js邮箱，汉字，数字 表单验证

    //电子邮箱验证 function isEmail(str) { var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_ ...

  3. 洛谷P2617 Dynamic Rankings 主席树 单点修改 区间查询第 K 大

    我们将线段树套在树状数组上,查询前预处理出所有要一起移动的节点编号,并在查询过程中一起将这些节点移到左右子树上. Code: #include<cstdio> #include<cs ...

  4. [arc086e]snuke line

    题意: 有n个区间,询问对于$1\leq i\leq m$的每个i,有多少个区间至少包含一个i的倍数? $1\leq N\leq 3\times 10^5$ $1\leq M\leq 10^5$ 题解 ...

  5. 洛谷2114 bzoj3668[NOI2014]起床困难综合症

    题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作斗争.通过研究相关文献,他找到了该病的发病原因 ...

  6. HDU-4296 Buildings 贪心 从相邻元素的相对位置开始考虑

    题目链接:https://cn.vjudge.net/problem/HDU-4296 题意 有很多板子,每一个板子有重量(w)和承重(s)能力 现规定一块板子的PDV值为其上所有板子的重量和减去这个 ...

  7. c++PrimerChap8IO库

    #include<iostream> #include<fstream> #include<string> using namespace std; int mai ...

  8. Axios 使用时遇到的问题

    最近使用 vue 构建一个小项目,在使用 axios 发送 post 请求的时候,发现 axios 发送数据默认使用 json 格式,百度搜了下,更改 ContentType 不管用,最终问题原来是: ...

  9. Qt之字体文件（TTF）

    简述 TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式. 在一些特殊的场合,系统字符集不 ...

  10. js php 数组比較

    php 与 javascript 数组除了定义以及 操作上有非常大的差别,还有非常多其他的差别.如今我们就来讨论讨论.    1.大家都知道php比較两个数组是否全相等(值,索引)相等 $a=arra ...