JavaScript实现查询定位中心的功能和FindTask功能应用


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

(0)
上一篇 2022年7月27日
下一篇 2022年7月27日

相关推荐

发表回复

登录后才能评论