当前位置: 代码迷 >> CGI >> 基于jQuery插件imgAreaSelect和ArcGIS server模仿实现百度map的截图功能
  详细解决方案

基于jQuery插件imgAreaSelect和ArcGIS server模仿实现百度map的截图功能

热度:481   发布时间:2012-10-30 16:13:36.0
基于jQuery插件imgAreaSelect和ArcGIS server模仿实现百度地图的截图功能

?最近项目中要求实现类似百度地图中的截图功能,关键在于利用脚本实现绘制一个可拖放和调整大小的矩形框,然后获取该矩形框左上角和右下角的屏幕坐标,再转换为地图坐标。再将这两个点的地图坐标传送到服务端构造一个Envelope,利用ArcGIS Server提供的相关接口和类将该外包矩形内的地图内容导出为指定格式的图片,从而实现模拟截图。

开发环境:VS2008 SP1+ArcGIS server9.3 sp1
在实现过程中主要是用到了jQuery插件imgAreaSelect,具体介绍见http://odyniec.net/projects/imgareaselect/。

具体步骤如下:

一:准备jQuery文件

imgareaselect插件下载:http://odyniec.net/projects/imgareaselect/

二:将解压后的JavaScript和css文件分别复制到你的程序的相应目录下。

三:在页面中添加对JavaScript和css文件的引用,如下:

<head>

...

<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />?

<script type="text/javascript" src="JavaScript/jquery.min.js"></script>

<script type="text/javascript" src="JavaScript/jquery.imgareaselect.js"></script>

...

</head>

四:在脚本中使用该插件提供的方法

<script type="text/javascript">

$(document).ready(function () {

$('#Map1').imgAreaSelect({ handles: true, onSelectEnd: showCoords }); });

</script>

showCoords(img,selection)是矩形绘制结束后执行的一个函数,其参数img代表被截的图片或地图;selection代表截图区域,通过它可以得到截图矩形的左上角和右下角的相对于其父对象的屏幕坐标。
五:服务端截图关键代码:
public?void?ExportSelection(double?minX,?double?minY,?double?maxX,?double?maxY)
????{
????????
//通过IGISServerConnection来创建服务器上下文
????????IGISServerConnection?gisServerConnection?=?new?GISServerConnection();
????????gisServerConnection.Connect(
"localhost");
????????IServerObjectManager4?serverObjectManager?
=?(IServerObjectManager4)gisServerConnection.ServerObjectManager;
????????IServerContext?serverContext?
=?serverObjectManager.CreateServerContext("USA_Data",?"MapServer");
????????
//获取地图
????????ESRI.ArcGIS.Carto.IMapServer?pMapServer?=?serverContext.ServerObject?as?ESRI.ArcGIS.Carto.IMapServer;
????????ESRI.ArcGIS.Carto.IMapServerObjects?pMapServerObjs?
=?pMapServer?as?ESRI.ArcGIS.Carto.IMapServerObjects;

????????
//通过ICenterAndSize转化成IMapArea

????????ESRI.ArcGIS.Carto.IMapServerInfo?mapInfo?
=?pMapServer.GetServerInfo(pMapServer.DefaultMapName);
????????ESRI.ArcGIS.Carto.IMapDescription?mapDesc?
=?mapInfo.DefaultMapDescription;

????????
//截图区域中心点坐标
????????ESRI.ArcGIS.Geometry.IPoint?centerPoint?=?serverContext.CreateObject("esriGeometry.Point")?as?ESRI.ArcGIS.Geometry.IPoint;
????????centerPoint.X?
=?(minX?+?maxX)?/?2;
????????centerPoint.Y?
=?(minY?+?maxY)?/?2;
????????
//截图区域中心坐标及区域宽和高
????????ESRI.ArcGIS.Carto.ICenterAndSize?centerSize?=?serverContext.CreateObject("esriCarto.CenterAndSize")?as?ESRI.ArcGIS.Carto.ICenterAndSize;
????????centerSize.Center?
=?centerPoint;
????????centerSize.Height?
=?maxY?-?minY;
????????centerSize.Width?
=?maxX?-?minX;
????????
//指定新的CenterAndScale对象给MapDescription
????????mapDesc.MapArea?=centerSize?as?ESRI.ArcGIS.Carto.IMapArea;

????????
//需要Display?、Type
????????ESRI.ArcGIS.Carto.IImageDisplay?display?=?serverContext.CreateObject("esriCarto.ImageDisplay")?as?ESRI.ArcGIS.Carto.IImageDisplay;
????????display.DeviceResolution?
=?90;
????????
//输出图片的宽和高
????????display.Height?=imgHeight;
????????display.Width?
=?imgWidth;
????????
//图像类型
????????ESRI.ArcGIS.Carto.IImageType?type?=?serverContext.CreateObject("esriCarto.ImageType")?as?ESRI.ArcGIS.Carto.IImageType;
????????type.Format?
=?ESRI.ArcGIS.Carto.esriImageFormat.esriImagePNG;
????????type.ReturnType?
=?ESRI.ArcGIS.Carto.esriImageReturnType.esriImageReturnURL;

????????
//图像描述信息
????????ESRI.ArcGIS.Carto.IImageDescription?imageDesc?=?serverContext.CreateObject("esriCarto.ImageDescription")?as?ESRI.ArcGIS.Carto.IImageDescription;
????????imageDesc.Display?
=?display;
????????imageDesc.Type?
=?type;
????????
//导出为图片得到其url
????????ESRI.ArcGIS.Carto.IMapImage?image?=?pMapServer.ExportMapImage(mapDesc,?imageDesc);
????????imageurl?
=?image.URL;

????????
//由虚拟目录路径转换为实际的目录路径
????????IGISServerConnection?pGISServerConnection?=?new?GISServerConnectionClass();
????????
//请注意:connect输入的主机名,表示要连接的服务器
????????pGISServerConnection.Connect("localhost");
????????IServerObjectAdmin?pServerObjectAdmin?
=?pGISServerConnection.ServerObjectAdmin;
????????
//得到服务器目录对象
????????IServerDirectory?pSDir?=?serverContext.CreateObject("esriServer.ServerDirectory")?as?IServerDirectory;
????????
//得到GIS服务器的输出目录列表
????????IEnumServerDirectory?pEnumServerDirectory?=?pServerObjectAdmin.GetServerDirectories();
????????
string?serverDirectory?=?null;
????????pSDir?
=?pEnumServerDirectory.Next();
????????
while?(pSDir?!=?null)
????????{
????????????serverDirectory
=?pSDir.Path;
????????????pSDir?
=?pEnumServerDirectory.Next();
????????}

????????
string[]?directs?=?null;
????????directs?
=?imageurl.Split("/".ToCharArray());

???
//所截图片在服务器上的实际地址
????????physicalUrl?=?serverDirectory?+"\\"+?directs[directs.Length?-?1];

????????
//释放服务器上下文
????????serverContext.ReleaseContext();
????}

详细实现过程见程序:/Files/fengmiaosen/截图.rar

  相关解决方案