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");

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Find Task</title>

     <style type="text/css">

       @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";

       @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/compat/_grid/Grid.css";

       @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/compat/_grid/tundraGrid.css";

       body { font-size: 0.9em;

                font-family: Geneva, Arial, Helvetica, sans-serif;

              }

         .heading { font-weight: bold;

                    padding-bottom: 0.25em;

                  }

        #grid { border: 1px solid #333;

                  width: 33em;

                  height: 30em;

              }

     </style>

     <script type="text/javascript">djConfig={parseOnLoad:true}</script>

     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>

     <script type="text/javascript" language="Javascript">

       dojo.require("dojox.grid.Grid");

       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.

       dojo.require("esri.map");

       dojo.require("esri.tasks.find");

       var findTask, findParams, map;

       function init() {

           map = new esri.Map("map");

           var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {id:"usa"});

           map.addLayer(censusMapLayer);

           //实例化FindTask

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

           //FindTask的参数

           findParams = new esri.tasks.FindParameters();

           //返回Geometry

           findParams.returnGeometry = true;

           //查询的图层id

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

           //查询字段

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

       }

       //根据输入的关键字进行findTask操纵

       function execute(searchText) {

         //set the search text to find parameters

         findParams.searchText = searchText;

         findTask.execute(findParams,showResults);

       }

       //显示findTask的结果

       function showResults(results) {

        //清除上一次的高亮显示

         map.graphics.clear();

         var dataForGrid = [];

         for (var i=0, j=results.length; i<j; i++) {

           var curFeature = results[i];

           var graphic = curFeature.feature;

           //把查询到的字段信息等插入到dataForGrid

           var layerName = curFeature.layerName;

           var layerId = curFeature.layerId;

           var foundFieldName = curFeature.foundFieldName;

           var foundFieldValue = graphic.attributes[foundFieldName];

           var attValues = [layerName,layerId,foundFieldName,foundFieldValue];

           dataForGrid.push(attValues);

           //根据类型设置显示样式

           switch (graphic.geometry.type) {

             case "point":

               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]));

               break;

             case "polyline":

               var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);

               break;

             case "polygon":

               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]));

               break;

           }

           //设置显示样式

           graphic.setSymbol(symbol);

           //添加到graphics进行高亮显示

           map.graphics.add(graphic);

         }

         var model = new dojox.grid.data.Table(null, dataForGrid);

         var view1 = {

           cells: [

             [{name: 'Layer Name'},{name: 'Layer ID'},{name: 'Found Field Name'},{name: 'Found Field Value'}]

           ]

         };

         var layout = [ view1 ];

         gridWidget.setModel(model);

         gridWidget.setStructure(layout);

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     <div class="heading">Find State/City/River: <input type="text" id="searchText" value="KS" />

     <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" /></div>

     <div id="map" style="width:400px; height:300px; border:1px solid #000;"></div>

     <div id="grid" dojoType="dojox.Grid" jsId="gridWidget" structure="layout"></div>

   </body>

 </html>

ArcGIS api for javascript——查找任务-在地图上查找要素的更多相关文章

ArcGIS API For Javascript ：如何在地图上做出点位脉冲闪烁的效果
日常地图表达中我们通常使用的地图符号多是静态地图符号,时间久了会造成视觉审美疲劳,也没有现代感. 在这种背景下,对现有地图符号进行简单处理,即可得到色彩鲜艳,对比度强烈,活灵活现的地图表达形式. 灵感 ...
ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
ArcGIS API for JavaScript开发初探——基本地图组件使用
1.前言在上一篇我们已经我们已经讲述了第一个地图应用程序的HelloMap的创建过程,这一篇我们来讲述基本地图组件:Home Button.比例尺.鹰眼图的使用方法. 2.基本地图组件在ArcGI ...
Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)
Ⅰ. 在3.X版本中,设置Map对象的 "maxScale" 和 "minScale" 属性 <!DOCTYPE html> <html> ...
ArcGIS API For Javascript ：如何制作地图切换器
大部分情况下我们开发会使用原生的地图切换器,由于每个项目的页面风格不同,业务场景不同,因此需要做一些样式不同的地图切换器. 首先可以照猫画虎,自己照着地图切换器的样式抄一个,或者看看主流的地图切换器都 ...
基于ArcGIS API for Javascript的地图编辑工具
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...
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 ...
ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

随机推荐

74HC164应用
管脚定义与内部逻辑图注:管脚一般A.B连在一起作为一个输入:CLR硬件接VDD. 原理如下:每8个CLK上升沿,bit分别从QA移至QH,所以给定一个字节,左移后送入至A/B,这样Bit7经过8个上 ...
Twilio介绍和使用
1.Twilio是?需要如何才能通过Twilio打国际网络电话 http://uuxn.com/twilio-toll-free-sms介绍了通过网页来收取和发送信息需求:通过TWILIO拨打国外座 ...
STM8S103之时钟设置
最大时钟(指的是system clock):外部晶振24MHz,内部高速RC16MHz 三个时钟源:外部晶振.内部高速RC(上电默认) +内部低速RC 几个时钟:master clock(即sytem ...
SpringCloud学习笔记（17）----Spring Cloud Netflix之服务网关Zuul的使用
1. 什么时候Zuul? Zuul是一个基于jvm路由和服务端的负载均衡器,在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架. 路由功能:相当于nginx的反向代理比如: / 可能需要映射到 ...
MVC 设计模式
MVC 设计模式: 最早由 Trygve Teenskaug 在 1978 年提出,上世纪 80 年代是程序语言 Smalltalk 的一种内部架构.后来 MVC 被其他领域借鉴,成为了软件工程中的一 ...
关于JavaScript中this的指向，你知晓几分？请速来围观！
---恢复内容开始--- 一.this是什么东东? this是指包含它的函数作为方法被调用时所属的对象.这句话理解起来跟卵一样看不懂,但是如果你把它拆分开来变成这三句话后就好理解一点了. 1.包含它的 ...
用centos镜像制作本地yum源
1.上传iso镜像 2.挂载镜像到相应目录 mkdir /yumiso #创建目录mount -t iso9660 /dev/cdrom/sr0 /yumiso #挂载镜像文件到对应目录 3.备份旧的 ...
Virtualenv入门基础教程
本文目录: [TOC]虚拟环境简介 VirtualEnv用于在一台机器上创建多个独立的Python虚拟运行环境,多个Python环境相互独立,互不影响,它能够: 在没有权限的情况下安装新套件不 ...
[Luogu]P3338 [ZJOI2014]力(FFT)
题目描述给出\(n\)个数\(q_i\),给出\(F_j\)的定义如下: \(F_j = \sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{i>j}\fr ...
python学习--导入自己的包
定义一个自己的方法包: def myFunc(x): if x > 10: return x else: return -x 在需要的地方导入包: # 导入自定义的方法包 from learn ...

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

描述

ArcGIS api for javascript——查找任务-在地图上查找要素的更多相关文章

随机推荐

热门专题