ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能和FindTask功能应用（七）

最新推荐文章于 2020-11-30 08:50:10 发布
最新推荐文章于 2020-11-30 08:50:10 发布
阅读量1.3k 收藏
点赞数
分类专栏： ArcGIS Server 文章标签： Arcgis Server Web JavaScript API

原址：http://www.cnblogs.com/hll2008/archive/2008/11/29/1343994.html

目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能，主要是通过FindTask功能实现的，输入关键字后对指定的图层以及字段进行关键字查询并且把查询到的结果显示在右边的Grid中，点击Grid中的某一行时进行定位中心进行显示。
准备工作：
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。
完成后的效果图：

开始
1.启动vs新建名为FindTask的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建mapapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、关键字输入的input、查找input按钮、DataGrid表格，添加完成后的html代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FindTask._Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dojox/grid/resources/Grid.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dojox/grid/resources/tundraGrid.css"/>


    <style type="text/css">
        .style1
        {
            width: 301px;
        }


    </style>
    <script type="text/javascript">djConfig={parseOnLoad:true}</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script> 
    <script type="text/javascript" src="javascript/mapapp.js"></script>
</head>
<body class="tundra">
    <form id="form1" runat="server">
    进行查询<input id="searchText" value="KS" type="text" /><input id="Button1" type="button" 
            value="查 找" οnclick="execute(dojo.byId('searchText').value);" />
    <table border="1px">
    <tr><td><div id="map" style="width:400px; height:300px; border:1px solid #000;"></div>
    </td>
    <td valign="top" class="style1">
    <table dojoType="dojox.grid.DataGrid" jsid="gridWidget" id="gridWidget" rowsPerPage="5" rowSelector="20px" >
      <thead>
        <tr>
          <th field="AREANAME" >AREANAME</th>
          <th field="CAPITAL" >CAPITAL</th>
          <th field="ST" >ST</th>
        </tr>
      </thead>
    </table>


    </td>
    </tr>
    </table>
</form>
</body>
</html>


3.上面的html中添加了Grid.css和tundraGrid.css两个样式文件的引用，因为在本例子中用dojox.grid.DataGrid作为数据表格显示控件，所以需要添加这2个样式，同时在页面代码的开头处添加了<script type="text/javascript">djConfig={parseOnLoad:true}</script>这个行js代码。
4.上面的html中用到了dojox.grid.DataGrid控件可以按照上面的地方进行设置，其它更多的请参考dojo的帮助文档。
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);


6.完成运行查看效果。

萝卜耳朵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ArcArcGIS.Server.9.3和ArcGIS API for JavaScript.docx
10-28
。。。
arcgis api for javascript 快速定位多边形
淘淘小窝
01-31 5746
一点点记录方便查找
ArcGIS API for JS实现要素的查询与定位
NeilPy的博客
09-23 1万+
1、实现多要素查询与定位 a、线查询与定位 线要素主要是那些到路线，在查询下下拉选择某种道路类型，便可以获得该图层的layerid，将该ID值传递给要查询的URL，形成完整的查询URL，通过Query()和QueryTask实现查询过程，获取查询结果的features，循环遍历每个feature，添加Graphic样式，在图上高亮显示。   以上部分都比较容易，关键是定位。 之前实现...
ArcGis for JS 利用QueryTask查询实现对地图的定位功能
tendergray的博客
02-09 8796
一、首先我们要把地图map加载到我们的页面中，然后就是根据已知的信息内容实现在map上的定位操作。   二、实现点击已知的信息内容在地图上定位，这就是一般的DOM操作。（我们是把DOM操作和arcgis的操作分离的，需要的时候直接调用函数方法就可以了。）   三、我们现在只帖出来arcgis的js代码。
ArcGis for js 查询定位、缩放致
ch_cyq的专栏
11-17 8069
queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/test/MapServer/0"); query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["*"];
ArcGIS API for JavaScript实现坐标定位
idomyway的博客
08-31 7684
坐标定位是gis系统中常用的功能 效果图 实现代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px;
ArcArcGIS.Server.9.3和ArcGIS API for JavaScript.pdf
10-28
。。。
ArcGIS API for JavaScript v3.x与v4.x最新版本api与sdk开发包资源下载
06-08
提供ArcGIS API for JavaScript v3.x与v4.x最新的api与sdk开发包资源下载，2021.06.08最新版本为v3.36及v4.19，分享文件包含以往旧的资源包，因CSDN上传限制，现将资源包整合至天翼云（下载不会限速），以后将在天翼...
ArcArcGIS.Server.9.3和ArcGIS_API_for_JavaScript
07-14
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现基本的地图功能
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGis-for-javaScript最全中文API
ArcGIS API For Javascript之地图基本加载与显示，地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现
wulafly的博客
04-12 2万+
ArcGIS API For Javascript之地图加载与显示
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能和FindTask功能应用（七）...
weixin_34189116的博客
11-29 179
目的： 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能，主要是通过FindTask功能实现的，输入关键字后对指定的图层以及字段进行关键字查询并且把查询到的结果显示在右边的Grid中，点击Grid中的某一行时进行定位中心进行显示。 准备工作： 1. 在ArcGis Server9.3中发布名为usa的MapServer。 2....
（六）ArcGIS API For Javascript之查询功能
热门推荐
王培晓Carpenter
09-29 3万+
引言 需求 1利用FindTask实现简单的属性查询 11代码实现 22全部代码 2利用QueryTask实现空间查询 21代码实现 22全部代码 3利用QueryTask进行属性查询 31全部代码 4利用IdentifyTask实现空间查询 41全部代码 1.引言在ArcGIS API中查询功能是非常常用的，Esri给我们提供了三个类用于实现矢量数据查询功能。FindTask,QueryTask,
arcgis api for javascript 4.16 定位功能的实现
qq_43725946的博客
11-30 2260
一、定位功能，应用场景为自定义搜索框，可以用ajax搜索结果，然后单击定位。还有一种是下面说的，在element ui表格中，点击定位按钮，实现地图跳转定位。 二、代码部分。 // 定位功能 locator: async function (id) { loadModules(['esri/tasks/support/Query'], {css: false}).then(([Query]) => { const query = new Query() let where =
JavaScript结合ArcGIS地图服务实现的搜索建议框
a_dev的专栏
09-19 1254
因项目功能需要，开发一个类似百度的那种搜索建议框，即通过输入的关键字进行匹配提示。不要求进行智能推荐，只要返回包含该关键字的若干条结果就行。效果大致如下： 初步的想法是利用第三方插件来做。进行过如下尝试。 1.使用autocomplete.js（自动完成） 某第三方autocomplete插件是这样写的（省略部分代码）： (function ($) { $.fn
用query实现图层信息的查询和定位功能
weixin_33714884的博客
01-08 544
QueryTask和Query是arcgis server端已经封装好的服务，在flex的客户端只需要提供必要的参数即可执行查询，并返回数据以供操作。 本文主要是根据query的where条件执行查询，并实现图形的定位，高亮显示和属性信息的展示。 &lt;esri:QueryTask id="queryTask" url="{queryurl}" useAMF="false" /&...
（五）ArcGIS JS FindTask 按属性查询地图信息
idomyway的博客
02-05 3033
前言        我们在使用ArcGIS JS API时，会遇到在文本框中输入名称，查询该要素，实现要素的查找功能。准备 在本地部署ArcGIS JS API/调用在线的API 本地部署ArcGIS JS API 发布好的动态地图服务 http://blog.csdn.net/idomyway/article/details/79232011 思路 HTML页文本框接收查询名称 点击事
Suno AI Download 免费下载Suno AI 音乐
04-18
网站描述：Sunoaidownload——从分享链接中轻松下载Suno AI生成的歌曲文件 内容概要： 这是一个专门提供Suno AI生成的歌曲文件下载服务的网站，用户可以通过分享链接轻松获取所需文件。本网站提供高质量、多样化的音乐资源，满足不同用户的需求。 适用人群： 该网站适用于所有热爱音乐、需要音乐素材的用户，特别适合音乐创作者、音乐爱好者、学生、教师等人群使用。 使用场景： 该网站的使用场景非常广泛，具体包括以下几个方面： 1. 音乐创作：音乐创作者可以使用本网站提供的歌曲文件进行创作，丰富作品内容，提升作品质量。 2. 音乐学习：学生和教师可以使用本网站的歌曲文件进行音乐学习，提高音乐素养和技能。 3. 娱乐休闲：普通用户可以使用本网站的歌曲文件进行放松、娱乐和休闲，享受音乐带来的愉悦。 其他说明： 本网站提供高速、稳定的下载服务，确保用户能够快速获取所需文件。同时，我们注重版权保护，只提供合法授权的歌曲文件，避免侵犯他人权益。为了更好地服务用户，我们不断优化网站功能和用户体验，欢迎提出宝贵意见和建议。此外，为了保障用户数据安全，我们采取了先进的安全措施。
基于Python的Django配置Celery设计源码
最新发布
04-18
本项目是基于Python的Django配置Celery设计源码，包含20个文件，其中主要包含17个py源代码文件。系统采用了Python编程语言，实现了Django配置Celery的功能。项目结构清晰，代码可读性强，易于理解和维护。
arcgis for javascript api 4.x 中，使用本地非 4326坐标系绘制功能实现
05-25
在 ArcGIS for JavaScript API 4.x 中，使用本地非 4326 坐标系绘制功能可以通过以下步骤实现： 1. 创建一个地图对象并设置其坐标系，例如： ```javascript var map = new Map({ basemap: "streets", ground: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值