ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能和FindTask功能应用(七)(2) 5.完成页面的html后切换到mapapp.js的文件开始编写js功能,js代码包括3块功能,第一是地图的载入显示代码;第二是关键字查询的FindTask的功能;第三是DataGrid的行点击后进行定位中心显示的功能。具体的说明和代码如下: dojo.require("esri.map"); dojo.require("esri.tasks.find"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); var findTask, findParams, map; function init() { startExtent = new esri.geometry.Extent(-127.968857954995,25.5778580720472,-65.0742781827045,51.2983251993735, new esri.SpatialReference({wkid:4269})); map = new esri.Map("map"); //底图Tile图 var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"); map.addLayer(imageryPrime); //动态图 var portlandLandBase = new esri.layers.ArcGISDynamicMapServiceLayer("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"); //设置要显示的图层 portlandLandBase.setVisibleLayers([2,1,0]); //设置图层透明度 portlandLandBase.setOpacity(0.8); map.addLayer(portlandLandBase); //设置地图视图范围 map.setExtent(startExtent); //给DataGrid添加行点击事件 dojo.connect(gridWidget, "onRowClick", onRowClickHandler); //实例化FindTask findTask = new esri.tasks.FindTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"); //FindTask的参数 findParams = new esri.tasks.FindParameters(); //返回Geometry findParams.returnGeometry = true; //查询的图层id findParams.layerIds = [0,1,2]; //查询字段 findParams.searchFields = ["BJECTID","AREANAME","CAPITAL","ST","AREA"]; } //给DataGrid行点击事件 function onRowClickHandler(evt) { //获取点击行 var row = gridWidget.getItem(evt.rowIndex); //获取点击行的OBJECTID var id=row.OBJECTID; var sGrapphic; //遍历地图的graphics查找OBJECTID和点击行的OBJECTID相同的Grapphic for(var i=0;i<map.graphics.graphics.length;i++) { var cGrapphic=map.graphics.graphics[i]; if((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID==id) { sGrapphic=cGrapphic; break; } } var sGeometry=sGrapphic.geometry; //当点击的行对应的Geometry为点类型时进行地图中心定位显示 if(sGeometry.type=="point") { //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25])); //sGrapphic.setSymbol(hsymbol); var cPoint=new esri.geometry.Point(); cPoint.x=sGeometry.x; cPoint.y=sGeometry.y; map.centerAt(cPoint); } //当点击的行对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示 else { var sExtent=sGeometry.getExtent(); map.setExtent(sExtent); } } //根据输入的关键字进行findTask操作 function execute(searchText) { findParams.searchText = searchText; findTask.execute(findParams,showResults); } //显示findTask的结果 function showResults(results) { //清楚上一次的高亮显示 map.graphics.clear(); var dataForGrid = []; for(var i=0;i<results.length;i++) { var curFeature=results[i]; var graphic = curFeature.feature; //把查询到的对象的字段信息等插入到dataForGrid中 dataForGrid.push(graphic.attributes); //根据类型设置显示样式 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); } //dojox.grid.DataGrid显示的一些设置,具体参考dojo的DataGrid var data = {identifier: "OBJECTID",label: "OBJECTID", items: dataForGrid}; var store = new dojo.data.ItemFileReadStore({ data:data }); //gridWidget为dojox.grid.DataGrid gridWidget.setStore(store); //过滤条件 gridWidget.setQuery({OBJECTID: '*' }); } dojo.addOnLoad(init);
原创文章,作者:745907710,如若转载,请注明出处:https://blog.ytso.com/277310.html