南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（六）地图搜索模块

sinna

config.xml文件的配置如下：
<widget label="地图搜索" icon="assets/images/emergency_resource_over.png"config="widgets/Search/SearchWidget.xml" url="widgets/Search/SearchWidget.swf" />

源代码目录如下：

地图搜索模块的源代码原理解析，详细的代码在下载的开源flexviewer自带的：

大概的思路如下：SearchWidget.xml是地图搜索模块的配置文件，SearchWidget.mxml是widget；SearchWidget.xml主要是配置地图图层搜索的服务url，用来进行query查询用，这个模块的核心其实就是调用arcgis api的query类以及queryTask

SearchWidget.xml：

1. <?xml version="1.0" ?>
   
2. <configuration label="Louisville Parcels and Police">
   
3.     <layers>
   
4.         <layer>
   
5.             <name>兴趣点</name>
   
6.             <url>http://localhost:6080/ArcGIS/rest/services/nsResearch/MapServer/0</url>
   
7.             <expression>Name_CHN like '%[value]%'</expression>
   
8.             <textsearchlabel>按照名称搜索</textsearchlabel>
   
9.             <titlefield>Name_CHN</titlefield>
   
10.             <linkfield></linkfield>
    
11.             <fields all="false">
    
12.                 <field name="Name_CHN"/>
    
13.             </fields>
    
14.         </layer>
    
15.         <layer>
    
16.             <name>道路</name>
    
17.             <url>http://localhost:6080/ArcGIS/rest/services/nsResearch/MapServer/1</url>
    
18.             <expression>Name_CHN like '%[value]%'</expression>
    
19.             <textsearchlabel>按照名称搜索</textsearchlabel>
    
20.             <titlefield>Name_CHN</titlefield>
    
21.             <linkfield></linkfield>
    
22.             <fields all="false">
    
23.                 <field name="Name_CHN"/>
    
24.             </fields>
    
25.         </layer>
    
26.         <layer>
    
27.             <name>区镇街</name>
    
28.             <url>http://localhost:6080/ArcGIS/rest/services/nsResearch/MapServer/5</url>
    
29.             <expression>Name_CHN like '%[value]%'</expression>
    
30.             <textsearchlabel>按照名称搜索</textsearchlabel>
    
31.             <titlefield>Name_CHN</titlefield>
    
32.             <linkfield></linkfield>
    
33.             <fields all="false">
    
34.                 <field name="Name_CHN"/>
    
35.             </fields>
    
36.         </layer>
    
37.         <layer>
    
38.             <name>社区街道</name>
    
39.             <url>http://localhost:6080/ArcGIS/rest/services/nsResearch/MapServer/3</url>
    
40.             <expression>Name_CHN like '%[value]%'</expression>
    
41.             <textsearchlabel>按照名称搜索</textsearchlabel>
    
42.             <titlefield>Name_CHN</titlefield>
    
43.             <linkfield></linkfield>
    
44.             <fields all="false">
    
45.                 <field name="Name_CHN"/>
    
46.             </fields>
    
47.         </layer>
    
48.         <layer>
    
49.             <name>村居委</name>
    
50.             <url>http://localhost:6080/ArcGIS/rest/services/nsResearch/MapServer/4</url>
    
51.             <expression>Name_CHN like '%[value]%'</expression>
    
52.             <textsearchlabel>按照名称搜索</textsearchlabel>
    
53.             <titlefield>Name_CHN</titlefield>
    
54.             <linkfield></linkfield>
    
55.             <fields all="false">
    
56.                 <field name="Name_CHN"/>
    
57.             </fields>
    
58.         </layer>      
    
59.         <layer>
    
60.             <name>水域河流名称</name>
    
61.             <url>http://localhost:6080/ArcGIS/rest/services/nsResearch/MapServer/2</url>
    
62.             <expression>Name_CHN like '%[value]%'</expression>
    
63.             <textsearchlabel>按照名称搜索</textsearchlabel>
    
64.             <titlefield>Name_CHN</titlefield>
    
65.             <linkfield></linkfield>
    
66.             <fields all="false">
    
67.                 <field name="Name_CHN"/>
    
68.             </fields>
    
69.         </layer>
    
70.         <layer>
    
71.             <name>所有</name>
    
72.             <url></url>
    
73.             <expression>Name_CHN like '%[value]%'</expression>
    
74.             <textsearchlabel>按照名称搜索</textsearchlabel>
    
75.             <titlefield>Name_CHN</titlefield>
    
76.             <linkfield></linkfield>
    
77.             <fields all="false">
    
78.                 <field name="Name_CHN" />
    
79.             </fields>
    
80.         </layer>
    
81.     </layers>
    
82.     <zoomscale>10000</zoomscale>
    
83. </configuration>
    
84. 
    
85. <!--
    
86.     See Search widget tag reference at
    
87.     http://links.esri.com/searchwidget
    
88. -->

复制代码

SearchWidget.mxml：具体实现部分，我截图部分代码好了，具体的详见flexviewer，首先是利用在地图框选（线 面 拉框等等）获取框选的范围Geometry，然后利用当前的Geometry作为queryTask的参数，用于query查询

1. private function activateDrawTool(event:MouseEvent):void
   
2.             {
   
3.                 addSharedData("Deactivate_DrawTool", null); // to be able to deactivate drawTool on other widgets
   
4. 
   
5.                 // apply glow
   
6.                 selectedDrawingIcon = FocusableImage(event.currentTarget);
   
7.                 clearSelectionFilter();
   
8.                 selectedDrawingIcon.filters = [ glowFilter ];
   
9. 
   
10.                 finishDrawing = false;
    
11. 
    
12.                 var status:String;
    
13.                 var value:String = selectedDrawingIcon.name;
    
14.                 switch (value)
    
15.                 {
    
16.                     case DrawTool.MAPPOINT:
    
17.                     {
    
18.                         status = pointLabel;
    
19.                         drawSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, 0x3FAFDC, 1);
    
20.                         break;
    
21.                     }
    
22.                     case DrawTool.POLYLINE:
    
23.                     {
    
24.                         status = lineLabel;
    
25.                         drawSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0x3FAFDC, 1, 1);
    
26.                         break;
    
27.                     }
    
28.                     case DrawTool.EXTENT:
    
29.                     {
    
30.                         status = rectangleLabel;
    
31.                         drawSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0x3FAFDC, 0.5, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0x3FAFDC, 1, 1));
    
32.                         break;
    
33.                     }
    
34.                     case DrawTool.POLYGON:
    
35.                     {
    
36.                         status = polygonLabel;
    
37.                         drawSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0x3FAFDC, 0.5, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0x3FAFDC, 1, 1));
    
38.                         break;
    
39.                     }
    
40.                 }
    
41.                 setMapAction(value, status, drawSymbol, searchDrawEnd);
    
42.             }

复制代码

1. private function searchDrawEnd(event:DrawEvent):void
   
2.             {
   
3.                 // deactivate the draw tool
   
4.                 finishDrawing = true;
   
5. 
   
6.                 selectedDrawingIcon = null;
   
7.                 clearSelectionFilter();
   
8. 
   
9.                 event.target.deactivate();
   
10.                 var geom:Geometry = event.graphic.geometry;
    
11. 
    
12.                 if (geom is Polygon && GeometryUtil.polygonSelfIntersecting(geom as Polygon))
    
13.                 {
    
14.                     geometryService.simplify([ geom ]);
    
15.                 }
    
16.                 else
    
17.                 {
    
18.                     //to improve search results
    
19.                     if (geom.type == Geometry.MAPPOINT)
    
20.                     {
    
21.                         geom = createExtentAroundMapPoint(geom as MapPoint, pointSearchTolerance);
    
22.                     }
    
23. 
    
24.                     queryFeaturesGraphical(geom);
    
25.                 }
    
26.             }

复制代码

1. queryGeom = geom;
   
2.                 queryFields = searchLayer.fields;
   
3.                 queryTitleField = searchLayer.titlefield;
   
4.                 queryLinkField = searchLayer.linkfield;
   
5.                 queryLinkAlias = searchLayer.linkalias;
   
6.                
   
7.                 if (queryLayer)
   
8.                 {
   
9.                     var query:Query = new Query();
   
10.                     query.geometry = queryGeom;
    
11.                     query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
    
12.                     query.outSpatialReference = map.spatialReference;
    
13.                     
    
14.                     const supportsServerSideSorting:Boolean = queryLayer.layerDetails
    
15.                         && queryLayer.layerDetails.version >= 10.1
    
16.                         && queryLayer.layerDetails.supportsAdvancedQueries;
    
17.                     const orderByFields:Array = searchLayer.orderbyfields;
    
18.                     if (supportsServerSideSorting && orderByFields)
    
19.                     {
    
20.                         query.orderByFields = orderByFields;
    
21.                     }
    
22.                     
    
23.                     var queryOptions:Object =
    
24.                         {
    
25.                             supportsServerSideSorting: supportsServerSideSorting,
    
26.                             orderByFields: orderByFields,
    
27.                             queryFields: queryFields
    
28.                         };
    
29.                     
    
30.                     queryLayer.queryFeatures(
    
31.                         query, new AsyncResponder(queryFeatures_resultHandler,
    
32.                             queryFeatures_faultHandler,
    
33.                             queryOptions));
    
34.                     
    
35.                     showMessage(loadingLabel, true);
    
36.                     showStateResults();
    
37.                 }

复制代码

1. private function queryFeatures_resultHandler(featureSet:FeatureSet, queryOptions:Object):void
   
2.             {
   
3.                 try
   
4.                 {
   
5.                     if (!queryOptions.supportsServerSideSorting && queryOptions.orderByFields)
   
6.                     {
   
7.                         FeatureSetUtil.sortFeaturesByFieldName(featureSet, queryOptions.orderByFields);
   
8.                     }
   
9.                     if(searchResultAC==null)searchResultAC=new ArrayCollection();
   
10.                     total++;
    
11.                     searchResultAC.addAll(createSearchResults(featureSet, queryOptions.queryFields));
    
12. 
    
13.                     addSharedData(widgetTitle, searchResultAC);
    
14.                     if (featureSet.features.length < 1)
    
15.                     {
    
16.                         showMessage(noResultLabel, false);
    
17.                     }
    
18.                     else
    
19.                     {
    
20.                         showMessage(selectionLabel + " " + searchResultAC.length, false);
    
21.                     }
    
22.                 }
    
23.                 catch (error:Error)
    
24.                 {
    
25.                     showMessage(error.message, false);
    
26.                 }   
    
27.                
    
28.             }

复制代码

GIS作品：百度搜索：GIS之家(https://shop116521643.taobao.com/shop/view_shop.htm);

QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395);

GIS技术交流群：432512093