ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-07-27 14:35:08  阅读:209  来源: 互联网

标签:map 功能 JavaScript dojo FindTask var new esri


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);

 

标签:map,功能,JavaScript,dojo,FindTask,var,new,esri
来源: https://www.cnblogs.com/devgis/p/16524694.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有