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

h330894169

浏览: 56140 次
性别:
来自: 长沙

最近访客更多访客>>

qq222196

pingyq

lovmye

brody_sun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

百度 jQuery JavaScript CSS 脚本

最近项目中要求实现类似百度地图中的截图功能，关键在于利用脚本实现绘制一个可拖放和调整大小的矩形框，然后获取该矩形框左上角和右下角的屏幕坐标，再转换为地图坐标。再将这两个点的地图坐标传送到服务端构造一个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