天津政府应急系统之GIS一张图(arcgis api for flex)讲解(六)地图搜索模块
2023-09-11 14:19:51 时间
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
相关文章
- Qsys配置生成nios系统模块
- Nunit Test 项目模块
- 在linux中使用phpize安装php扩展模块
- 第三百二十六节,web爬虫,scrapy模块,解决重复ur——自动递归url
- 已安装nginx动态添加模块
- Python中random模块生成随机数详解
- OpenCV每日函数 图像过滤模块 (3) boxFilter函数
- Qt编写安防视频监控系统66-子模块10网页浏览
- Qt编写安防视频监控系统63-子模块7悬浮地图
- Qt编写安防视频监控系统57-子模块1设备列表
- Nginx slice模块 用分片提升缓存效率
- maven常用命令:增加 -T 1C 参数指定多线程编译;编译过程中跳过测试步骤; 编译指定模块
- SAP Spartacus应用启用时导入的一些模块
- 图片处理工具GraphicsMagick介绍安装使用:GraphicsMagick图像处理系统Node.js gm模块处理图片(缩略图,加水印,裁剪图片)
- Python编程语言学习:包导入和模块搜索路径(包路径)简介、使用方法(python系统环境路径的查询与添加)之详细攻略
- 〖Python语法进阶篇⑲〗- 综合实战 - 抽奖系统之user模块 - 获取用户与奖品列表
- js模块系统require和import区别与联系
- 【Linux 内核】Linux 内核特性 ( 组织形式 | 进程调度 | 内核线程 | 多平台虚拟内存管理 | 虚拟文件系统 | 内核模块机制 | 定制系统调用 | 网络模块架构 )
- 1.1Spring历史发展和模块定义
- 鸿雁电器oa系统中决策支持模块效果
- django 数据库连接模块解析及简单长连接改造
- 【Linux驱动开发100问】如何加载和卸载Linux模块?
- Qt编写可视化大屏电子看板系统27-模块5负荷分布
- 使用pytorch动手实现LSTM模块
- ansible加密模块ansible-vault
- 【读书笔记】《Verilog数字系统设计教程》 第3章 模块的结构、数据类型、变量和基本运算符号(附思考题答案)