标签:
config.xml文件的配置如下:
1 <widget label="地图搜索" icon="assets/images/emergency_resource_over.png" 2 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 } 16 if(searchResultAC==null)searchResultAC=new ArrayCollection(); 17 total++; 18 searchResultAC.addAll(createSearchResults(featureSet, queryOptions.queryFields)); 19 20 addSharedData(widgetTitle, searchResultAC); 21 if (featureSet.features.length < 1) 22 { 23 showMessage(noResultLabel, false); 24 } 25 else 26 { 27 showMessage(selectionLabel + " " + searchResultAC.length, false); 28 } 29 } 30 catch (error:Error) 31 { 32 showMessage(error.message, false); 33 } 66 67 }
备注:
GIS技术交流QQ群:432512093
南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(六)地图搜索模块
标签:
原文地址:http://www.cnblogs.com/oolili/p/5060289.html