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/tech/webdev/277310.html