属性查询图形FindTask

最新推荐文章于 2022-06-10 06:37:15 发布
最新推荐文章于 2022-06-10 06:37:15 发布
阅读量273 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/513813
版权
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
     < title >属性查询图形</ title >
     < script  src = "../js/jsConfigVS.js" ></ script >
     < link  rel = "stylesheet"  type = "text/css"  href = "../arcgis_js_api/library/3.17/esri/css/esri.css"  />
     < link  rel = "stylesheet"  type = "text/css"  href = "../arcgis_js_api/library/3.17/dijit/themes/claro/claro.css" >
     < link  rel = "stylesheet"  href = "Layout.css"  />
     < script  src = "../arcgis_js_api/library/3.17/init.js"  type = "text/javascript" ></ script >
     < style  type = "text/css" >
         html, body {
             height: 100%;
             width: 100%;
             margin: 0; 
             padding: 0;
         }
         body {
         background-color:#777;
         overflow:hidden;
         font-family: "Trebuchet MS";
         font-size:9pt;
         }
         .dijitAccordionTitle {
             background-color:#777;
         overflow:hidden;
         font-family: "Trebuchet MS";
         font-size:12pt;
         }
         #header {
         background-color:#444;
         color:white;
         font-size:20pt;
         text-align:center;
         font-weight:bold;
         }
         #attributionText {
         background-color:whitesmoke;
         color:black;
         font-size:7pt;
         text-align:left;
         margin:5px;
         }
         #divNeighborhoodName {
         background-color:white;
         color:black;
         font-size:16pt;
         text-align:center;
         font-weight:bold;
         }
         #footer {
         background-color:#444;
         color:yellow;
         font-size:10pt;
         text-align:center;
         }
     </ style >
     < script >
         var map;
         
         require(["dojo/parser",
             "dojo/on",
             "dojo/dom",
             "esri/basemaps",
             "esri/map",
             "esri/geometry/Extent",
             "esri/SpatialReference",
             "esri/layers/ArcGISTiledMapServiceLayer",
             "esri/layers/ArcGISDynamicMapServiceLayer",
             "esri/geometry/Point",
             "esri/tasks/FindTask",
             "esri/tasks/FindParameters",
             "esri/InfoTemplate",
             "esri/symbols/SimpleMarkerSymbol",
             "esri/symbols/SimpleLineSymbol",
             "esri/symbols/SimpleFillSymbol",
             "esri/Color",
             "dijit/layout/BorderContainer",
             "dijit/layout/ContentPane",
             "dojo/domReady!"],
             function (
                 parser,
                 on,
                 dom,
                 esriBasemaps,
                 Map,
                 Extent,
                 SpatialReference,
                 ArcGISTiledMapServiceLayer,
                 ArcGISDynamicMapServiceLayer,
                 Point,
                 FindTask,
                 FindParameters,
                 InfoTemplate,
                 SimpleMarkerSymbol,
                 SimpleLineSymbol,
                 SimpleFillSymbol,
                 Color)
             {
                 parser.parse();
                 esriBasemaps.XjOnline = {
                     baseMapLayers: [{ url: xjuConfig.vectorLayers }],
                     thumbnailUrl: "images/topo.jpg",
                     title: "矢量图"
                 };
                 esriBasemaps.XjRaster = {
                     baseMapLayers: [{ url: xjuConfig.imageLayers }],
                     thumbnailUrl: "images/satellite.jpg",
                     title: "卫星图"
                 };
                 var startExtent = new Extent({
                     "xmin": 73.441277,
                     "ymin": 34.334934,
                     "xmax": 96.388373,
                     "ymax": 49.178574,
                     "spatialReference": { "wkid": 4326 }
                 });
                 //加载底图       
                 map = new Map("mapDiv", {
                     extent: startExtent,
                     zoom: 0,
                     basemap: "XjRaster",
                     sliderStyle: "large",
                     logo: false
                 });
                 // 实例化FindTask        
                 var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/BaseMap/XjOnline/MapServer");
                 // FindTask的参数
                 var findParams = new FindParameters();
                 // 返回Geometry
                 findParams.returnGeometry = true;
                 // 查询的图层id
                 findParams.layerIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 33, 34, 35, 36, 37, 46];
                 //findParams.layerIds = [27,28,29,30,31,33,34,35,36,37,46];
                 // 查询字段
                 findParams.searchFields = ["NAME"];
                 var ptSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
                 var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
                 on(dom.byId("findBtn"), "click", function () {
                     execute(dom.byId('searchText').value);
                 });
                 // 根据输入的关键字进行findTask操作
                 function execute(searchText) {
                     findParams.searchText = searchText;
                     findTask.execute(findParams, showResults);
                 }
                 // 显示findTask的结果
                 function showResults(results) {
                     // 清除上一次的高亮显示
                     map.graphics.clear();
                     //输出统计结果值
                     dom.byId('totalSearchNum').innerHTML = results.length;
                     var innerHtml = "";
                     var symbol;
                     for (var i = 0; i < results.length; i++) {
                         var curFeature = results[i];
                         var graphic = curFeature.feature;
                         var infoTemplate = null;
                         // 根据类型设置显示样式
                         switch (graphic.geometry.type) {
                             case "point":
                                 symbol = ptSymbol;
                                 infoTemplate = new InfoTemplate("${NAME}", "${*}");
                                 break;
                             case "polyline":
                                 symbol = lineSymbol;
                                 infoTemplate = new InfoTemplate("${NAME}", "${*}");
                                 break;                            
                         }
                         // 设置显示样式
                         graphic.setSymbol(symbol);
                         graphic.setInfoTemplate(infoTemplate);
                         // 添加到graphics进行高亮显示
                         map.graphics.add(graphic);
                         innerHtml += "< a  href=\"javascript:positionFeature(" + graphic.attributes.OBJECTID;
                         if (graphic.attributes.Name) {
                             innerHtml += ",\'" + graphic.attributes.Name + "\')\">" + graphic.attributes.Name + "</ a >< br >";
                         }
                         else {
                             innerHtml += ",\'" + graphic.attributes.NAME + "\')\">" + graphic.attributes.NAME + "</ a >< br >";
                         }                        
                     }
                     dom.byId("contentsContainer").innerHTML = innerHtml;
                     
                 }
                 window.positionFeature = function (id, name) {                    
                     var sGrapphic;
                     //遍历地图的图形查找FID和点击行的FID相同的图形
                     for (var i = 0; i < map.graphics.graphics.length; i++) {
                         var cGrapphic = map.graphics.graphics[i];
                         var sGName = "";
                         if (cGrapphic.attributes.NAME) {
                             sGName = cGrapphic.attributes.NAME;
                         }
                         else {
                             sGName = cGrapphic.attributes.Name;
                         }
                         if ((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID == id && sGName == name) {
                             sGrapphic = cGrapphic;
                             break;
                         }
                     }              
                     // 当点击的名称对应的图形为点类型时进行地图中心定位显示
                     if (sGrapphic.geometry.type == "point") {
                         var cPoint = new Point(sGrapphic.geometry.x, sGrapphic.geometry.y);
                         var p = map.toScreen(cPoint);
                         var iw = map.infoWindow;
                         iw.setTitle(sGrapphic.getTitle());
                         iw.setContent(sGrapphic.getContent());
                         iw.show(p, map.getInfoWindowAnchor(p));
                         map.centerAt(cPoint);
                                               
                     }                        
                     else {                        
                         var cPoint = new Point(sGrapphic.geometry.paths[0][0][0], sGrapphic.geometry.paths[0][0][1]);
                         var p = map.toScreen(cPoint);
                         var iw = map.infoWindow;
                         iw.setTitle(sGrapphic.getTitle());
                         iw.setContent(sGrapphic.getContent());
                         iw.show(p, map.getInfoWindowAnchor(p));
                         map.centerAt(cPoint);
                     }
                 };
             });
     </ script >
</ head >
< body  class = "claro" >
     < div  id = "mainWindow"  data-dojo-type = "dijit/layout/BorderContainer"  data-dojo-props = "design:'headline',gutters:false"  style = "width:100%; height:100%;" >
       <!--标题区域-->
       < div  id = "header"  data-dojo-type = "dijit/layout/ContentPane"  data-dojo-props = "region:'top'"  style = "height:50px;" >
           属性查询图形
       </ div >
       
       <!--中间地图区域-->
       < div  id = "mapDiv"  data-dojo-type = "dijit/layout/ContentPane"  data-dojo-props = "region:'center'"  style = "margin:5px;" >
       </ div >
       <!--右边为属性查询与结果显示区域-->
       < div  data-dojo-type = "dijit/layout/ContentPane"  data-dojo-props = "region:'right'"  style = "width:35%;margin:5px;background-color:whitesmoke;" >     
           输入查询文本
           < input  id = "searchText"  value = "胜利路"  type = "text"  />
           < input  id = "findBtn"  type = "button"  value = "查 找"  />
           < div >查询到的结果数为：< span  id = "totalSearchNum"  style = "font-weight:800;" >0</ span ></ div >
           < div  id = "contentsContainer" ></ div >
       </ div >        
     </ div >
</ body >
</ html >

结果：

wKioL1fUw4rhGobwAAbw2GvW8e8944.jpg




     本文转自stock0991 51CTO博客，原文链接http://blog.51cto.com/qing0991/1851562：，如需转载请自行联系原作者






weixin_33810302
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ArcGIS for Android FindTask的简单使用
07-31
ArcGIS for Android FindTask的简单使用
图形查询属性（IdentifyTask实现查询）//查询本地服务
weixin_34245082的博客
07-26 708
主页代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图形查询属性</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/j...
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能和FindTask功能应用（七）...
weixin_34189116的博客
11-29 186
目的： 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能，主要是通过FindTask功能实现的，输入关键字后对指定的图层以及字段进行关键字查询并且把查询到的结果显示在右边的Grid中，点击Grid中的某一行时进行定位中心进行显示。 准备工作： 1. 在ArcGis Server9.3中发布名为usa的MapServer。 2....
findTask测试
心如止水 宠辱不惊
10-09 1055
Simple Find dojo.require("esri.tasks.find"); var find, params; function init() { find = new esri.tasks.FindTask("https://sampleserver1.arcgisonl
FindTask练习
weixin_34246551的博客
05-06 116
CODE <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="libra...
FindTask ArcGIS地图源码_ios源码
09-08
"FindTask ArcGIS地图源码_ios源码" 是一个针对iOS平台开发的项目，主要涉及的是使用Esri公司的ArcGIS技术来实现地图功能的应用。ArcGIS是地理信息系统（Geographic Information System）的一个强大工具，广泛应用于...
ArcGIS中的三种查询
09-19
1. QueryTask是进行空间和属性查询的重要工具。它可以对地图服务的特定子图层进行查询，而且值得注意的是，被查询的地图服务不一定需要加载到Map组件中显示。QueryTask的执行需要两个关键参数：一是查询的目标图层...
webGIS资源文档1
最新发布
08-08
本文将深入探讨WebGIS中的几种关键查询类型，包括FindTask、IdentifyTask和QueryTask。 1. **FindTask查询模式**： FindTask主要用于基于关键字的模糊查询，适用于那些需要通过文本信息查找地图上特定对象的场景。...
FindTask类使用方法
04-20 2094
<br />FindTask类特点：支持多图层查询支持字段查询只能进行属性查询，不能进行空间查询不能指定返回字段，只能返回[displayFieldName : String,feature : Graphic,foundFieldName : String,layerId : Number,layerName : String,value : String ]<br />FindTask使用步骤：创建FindTask类创建FindParameters类创建UI输入界面，定义按钮查询事件在按钮事件中，执行F
查询---FindTask属性查询
DanBo_C的博客
08-10 1208
1. 效果图 2. 引入模块 //查询对象 "esri/tasks/FindTask", //查询参数 "esri/tasks/FindParameters", //线符号对象 "esri/symbols/SimpleLineSymbol", //面符号对象 "esri/symbols/SimpleFillSymbol", //图形对象 "esri/graphi...
arcgis api for javascript 之QueryTask查询
04-08
共享作业 arcgis api for javascript 之QueryTask查询
arcgis api for JavaScript学习-查询FindTask
Zzzpiu的博客
10-22 589
FindTask查询 Findtask：用于属性查询，可以查询多个图层，不能进行空间查询 思路： 创建需要的对象FindTask、FindParameters、渲染符号SimpleLineSymbol等。 设置查询参数FindParameters 执行查询 渲染查询结果 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查
ArcGIS for Android FindTask的简单使用
yifei1989的专栏
07-31 3055
在ArcGIS  for Android（10.1.1） 查找使用FindTask这个类，给它传入FindParameters的参数，可以执行查找操作，并返回FindResult类型的List集合，跟QueryTask和IdentifyTask都有点像，但它们三个还是有差别的： QueryTask所查找的对象为一个MapServer的只图层，并可以可以不用加载进来就可以直接进行查询，可以进行空间
QueryTask,FindTask,IdentifyTaskflex区别
lu_cy的专栏
04-19 2851
1：QueryTask是一个进行空间和属性查询的功能类，它可以在某个地图服务的某个子图层内进行查询，顺便需要提一下的是，QueryTask进行查询的地图服务并不必项加载到Map中进行显示。QueryTask的执行需要两个先决条件：一个是需要查询的图层URL、一个是进行查询的过滤条件。      查询一个图层里面的数据:链接如http://10.188.180.124:8399/arcgis/rest/services/123/MapServer/13MS只可以查找唯一的数据；2：FindTask是在某个地图
Arcgis-engine二次开发之空间关系查询与按图形查询
weixin_47649329的博客
06-10 5312
本文通过使用c#语言实现Arcgis-engine二次开发功能：GIS查询与统计之按空间关系查询与按图形查询。
（五）ArcGIS JS FindTask 按属性查询地图信息
idomyway的博客
02-05 3058
前言        我们在使用ArcGIS JS API时，会遇到在文本框中输入名称，查询该要素，实现要素的查找功能。准备 在本地部署ArcGIS JS API/调用在线的API 本地部署ArcGIS JS API 发布好的动态地图服务 http://blog.csdn.net/idomyway/article/details/79232011 思路 HTML页文本框接收查询名称 点击事
ArcGIS API For Javascript 之 FindTask多图层的模糊查询
wangchaohpu的博客
07-14 2931
  对比queryTask的模糊查询，使用where，query.where="字段 like "+"'%某一个值%'";//模糊查询   FindTask的模糊查询，设置findParameters.contains = true即可，完整代码如下： require([ "esri/tasks/FindTask","esri/tasks/Find...
QGIS基本功| 图查属性、属性查图
QGISClass的博客
09-04 8098
01 属性数据概述 地理信息系统（GIS）的操作对象是地理实体数据，包括地理实体的空间数据和属性数据。属性数据是与空间位置相关、反映事物某些特性的数据，如名称、类型、数量等，一般用数值、文字表示，也称作非空间数据。属性数据表现了空间实体以外的其他属性特征，是对空间数据的补充说明。 在QGIS中，属性数据可以用于： 设置空间数据的样式，做出漂亮的地图。 例如，对比下面左右两幅地图，左边地图用相同的颜色、线型、线宽和注记绘制了等高线、河流、道路等，地图显得单调，难以区分其中的要素信息。右边地图根据属性不同，

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值