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

最新推荐文章于 2021-02-28 21:51:36 发布
最新推荐文章于 2021-02-28 21:51:36 发布
阅读量200 收藏
点赞数
文章标签： 百度 jQuery JavaScript CSS 脚本 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h330894169/article/details/83742591
版权

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

h330894169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现截取pc图片_jQuery实现截图拍照效果
weixin_39542093的博客
12-21 819
body,html,div,img{margin:0;padding:0;}body{cursor:crosshair;}div{width:200px;height:200px;position:absolute;}img{width:1200px;height:650px;}#photo{opacity:0.5;filter:alpha(opacity=50);margin:25px 0 0 ...
jQuery jcrop插件截图使用方法
10-26
项目需要做一个头像截取的功能，类似于QQ头像截取功能。在网上搜了下，最后使用jQuery插件jcrop来截取
JQuery-图片剪裁
在水一方
12-03 2530
imageselect.jsp Html代码 %@ page contentType="text/html; charset=UTF-8" %>  >  html xmlns="http://www.w3.org/1999/xhtml">      head>          base href="http://localhost:8080/dojodemo/" />          
jquery-cropper图片在线截图+图片保存服务器
12-14
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。 附件中有核心关键代码，实例参看:test1.ftl,FileController.java文件
jquery实现图片截取+放大预览功能
05-18
摘要:脚本资源,jQuery,图片裁剪　　jQuery实现图片截取+放大预览功能的插件实例，如上图所示，在图中任意位置按住鼠标左键拖动出一个区域，下方立刻会出现所选择区域的放大图，实现了完美的图片选区和放大预览功能。在平时我们会看到一些产品网站上，会出现放大的产品图片，和本功能就十分相似。
jquery的imgareaselect截图插件
01-18
这是利用jquery的imgareaselect进行截图的插件，使用代码请看我博客
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
12-01
上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例： 首先，要知道我们应该实现什么功能？ （1）图片能够实现上传预览功能 （2）拖拽裁剪图片，使其能够显示裁剪后的区域 （3...
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）
10-20
imgAreaSelect是一款强大的jQuery插件，专门用于在网页上实现图片的选择和裁剪功能，非常适合于需要用户自定义选取图片部分进行处理的应用场景。 首先，我们需要理解该插件的工作原理。该插件的核心在于保持左边...
jQuery插件imgAreaSelect基础讲解
10-19
关于ImgAreaSelect, 是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解，需要的的朋友参考下吧
arcgis for js 4.5 仿qq截图 地图截屏
06-14
Arcgis for js 4.5 仿qq截图,指定地图范围的地图截屏，截图结果将以图片路径形式返回。
jQuery属性选择器（附有代码以及运行截图）
GodGump的博客
02-28 440
jQuery 使用 XPath 表达式来选择带有给定属性的元素。 XPath使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 说上面是为了理解下面几个常见的属性选择器 注意一下代码中：attribute表示一个属性名，value表示一个属性值 $(" [attribute] = 'value' ") 选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。 $("[attribute*='value']")
jquery实现截取pc图片_jQuery实现图片循环展示
weixin_39918961的博客
12-21 182
今天，我们要通过基本的HTML、CSS和jQuery来实现一个超级简单的图片循环展示效果，先来看下最终的产品：Step1：网站目录网站目录非常简单，包含三部分：lesson1.html文件、lib目录和images目录。其中 lesson1.html 包含了一个页面最基本的组成部分，正确的设置 DOCTYPE 有助于页面在现代浏览器中正确渲染。html>图片循环展示lib目录仅包含了最新的 ...
jquery实现截取pc图片_html+jquery实现简单图片裁剪
weixin_39789101的博客
12-21 445
1 //代码重新修订2 class ClipTools {3 constructor() {4 this.workview = $('#sourceImage');5 this.showview = $('#previewwindow');67 this.workviewimg=$('#sourceImage>img')...
使用jquery jcrop插件进行图片的截取与保存
菜菜De学习
08-24 171
第一步：上传大图片到服务器，并且展示到页面 第二部：调用jcrop组件js及css &lt;script src="${ctx}/js/jquery-jcrop/jquery.Jcrop.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="${ctx}/css/jquery-jcrop/jquery.Jcrop.css" type=".
jquery 截取屏幕
dcli98004的博客
12-14 275
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>...
jquery 网页截屏保存图片
nvzizhou的专栏
04-10 8234
//生成图片保存即可 document.body所有截屏 html2canvas(document.body), { allowTaint: true, taintTest: false, onrendered: function(canvas) {
js截屏 video_jQuery+html5实现视频截图方法
weixin_30650955的博客
12-29 1124
Capturejs部分：(function() {“use strict”;var video, $output;var scale = 0.25;var initialize = function() {$output = $(“#output”);video = $(“#video”).get(0);$(“#capture”).click(captureImage);};var capture...
javascript图片特效
最新发布
06-07
JavaScript可以用来创建丰富的图片特效，增添网页的交互性和视觉吸引力。以下是一些常见的图片特效： 1. 动态加载：懒加载技术，图片在用户滚动到可视区域时才加载，提高页面性能。 2. 图片轮播：使用JavaScript库...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值