arcgis实现截图/截屏功能

arcgis实现截图/截屏功能

文章目录

  • arcgis实现截图/截屏功能
  • 前言
  • 效果展示
  • 相关代码

前言

本篇将使用arcgis实现截图/截屏功能，类似于qq截图

效果展示

在这里插入图片描述

相关代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>4.5 地图截图</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css"><script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script><script src="https://js.arcgis.com/4.5/"></script><script>require(["esri/Map","esri/views/MapView","esri/geometry/Extent","esri/geometry/Point","esri/widgets/Print","esri/Graphic","dojo/on","dojo/dom","esri/layers/GraphicsLayer","esri/tasks/PrintTask","esri/tasks/support/PrintTemplate","esri/tasks/support/PrintParameters","esri/views/2d/draw/Draw","esri/geometry/Polygon","esri/geometry/Point","dojo/domReady!"], function(Map, MapView, Extent, Point, Print, Graphic, on, dom, GraphicsLayer, PrintTask, PrintTemplate, PrintParameters, Draw, Polygon, Point) {let map = new Map({basemap: "streets"});let tempGraphicsLayer = new GraphicsLayer();map.add(tempGraphicsLayer);let view = new MapView({container: "viewDiv",map: map,zoom: 4,center: [15, 65] // longitude, latitude});view.ui.add("screenshot", "top-right");view.then(function () {let printTask = new PrintTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");  let printTemplate = new PrintTemplate({format: "jpg",exportOptions: {dpi: 96,width: 700,height: 1100},  layout: "MAP_ONLY",layoutOptions: {"titleText": "","authorText": "","copyrightText": "","scalebarUnit": "",},showLabels: false,preserveScale: false,attributionVisible: false //是否显示地图属性});let draw = new Draw({view: view});let drawAction = null;//允许绘制矩形function enableCreateRectangle(draw, view) {isStartDraw = isEndDraw = false;// create() will return a reference to an instance of PolygonDrawActiondrawAction = draw.create("polygon", {mode: "click"});// focus the view to activate keyboard shortcuts for drawing polygonsview.focus();// listen to vertex-add event on the actiondrawAction.on("vertex-add", drawRectangle);drawAction.on("cursor-update", drawRectangle);drawAction.on("vertex-remove", drawRectangle);drawAction.on("draw-complete", endDraw);}let tempRectangle = [];//   是否开始绘制，是否结束绘制 , 是否最后一次绘制let isStartDraw = false, isEndDraw = false, isLastDraw = false;//   结束绘制        function endDraw(evt){isLastDraw = true;let graphics = drawRectangle(evt);isLastDraw = false;//  改变指针样式$(".esri-view-root").css("cursor", "default");let lonlat = graphics[graphics.length - 1].geometry.rings[0][3];//  添加 “取消”、“保存”按钮let submit = new Graphic({geometry: new Point({x: lonlat[0],y: lonlat[1],z: 0,spatialReference: view.spatialReference}),symbol: {type: "text",declaredClass: "clipBtn",color: [0, 0, 0, 1],haloColor: "black",haloSize: "1px",text: "截屏",xoffset: -12,yoffset: -24,font: { // autocast as Fontsize: 12,//                            weight: "bold",family: "sans-serif"}},attributes: {clipName: "确定"}});tempRectangle.push(submit);tempGraphicsLayer.add(tempRectangle[tempRectangle.length - 1]);let cancel = new Graphic({geometry: new Point({x: lonlat[0],y: lonlat[1],z: 0,spatialReference: view.spatialReference}),symbol: {type: "text",declaredClass: "clipBtn",color: "red",haloColor: "black",haloSize: "1px",text: "取消",xoffset: -48,yoffset: -24,font: { // autocast as Fontsize: 12,//                            weight: "bold",family: "sans-serif"}},attributes: {clipName: "取消"}});tempRectangle.push(cancel);tempGraphicsLayer.add(tempRectangle[tempRectangle.length - 1]);//绘制结束isEndDraw = true;}//   绘制多边形             	function drawRectangle(evt) {//顶点取第一个点和最后一个点let vertices = [evt.vertices[0], evt.vertices[evt.vertices.length - 1]];//判断drawAction类型switch(evt.type){case "vertex-add":    //鼠标按下或鼠标拖动isStartDraw = true;break;case "cursor-update": //鼠标未按下状态时的鼠标移动//判断是否开始绘制，若开始绘制后鼠标抬起，则结束绘制if(isStartDraw){drawAction.complete();isStartDraw = false;}return;break;case "vertex-drag":isStartDraw = true;break;default:break;}//   若未开始绘制，则返回             	if(!isStartDraw){return;}//remove existing graphicclearGraphics();// create a new rectanglelet polygon = createRectangle(vertices);// create a new graphic representing the polygon, add it to the viewtempRectangle.push(createGraphic(polygon));tempGraphicsLayer.add(tempRectangle[tempRectangle.length - 1]);return tempRectangle;}//  创建矩形             function createRectangle(vertices) {let rectangle = new Polygon({rings: vertices,spatialReference: view.spatialReference});//  添加四个角的标记点         	let extent = rectangle.extent.clone();if(extent.xmin != extent.xmax && extent.ymin != extent.ymax){let rings = [];rings.push([extent.xmax, extent.ymax]);rings.push([extent.xmin, extent.ymax]);rings.push([extent.xmin, extent.ymin]);rings.push([extent.xmax, extent.ymin]);let rectangle = new Polygon({rings: rings,spatialReference: view.spatialReference})//   若不是最后一次绘制，则添加四个角点                     //                        if(!isLastDraw){for(let i=0; i<rings.length; i++){let marker = new Graphic({geometry: new Point({x: rings[i][0],y: rings[i][1],z: 0,spatialReference: view.spatialReference}),symbol: {type: "simple-marker", // autocasts as new SimpleMarkerSymbol()color: [0, 0, 0],outline: { // autocasts as new SimpleLineSymbol()color: [0, 0, 0],width: 0.5}},attributes: {clipName: "extent_" + i}});tempRectangle.push(marker);tempGraphicsLayer.add(tempRectangle[tempRectangle.length - 1]);}//                        }return rectangle;}return rectangle;}// 清除截屏的要素               function clearGraphics(){if(tempRectangle.length > 0){for(let i=0; i<tempRectangle.length; i++){tempGraphicsLayer.remove(tempRectangle[i]);}}tempRectangle = [];}//  创建截屏要素              function createGraphic(rectangle) {graphic = new Graphic({geometry: rectangle,symbol: {type: "simple-fill", // autocasts as SimpleFillSymbolcolor: [0, 0, 0, 0.1],style: "solid",outline: { // autocasts as SimpleLineSymbolcolor: [0, 0, 0],width: 1}},attributes: {clipName: "clipRectangle"}});return graphic;}// 截图按钮点击事件let screenshotBtn = document.getElementById("screenshot");screenshotBtn.addEventListener("click", function() {//清除已绘制图形clearGraphics();isEndDraw = false;enableCreateRectangle(draw, view);view.focus();//  改变指针样式$(".esri-view-root").css("cursor", "crosshair");});// 监听地图点击事件             view.on("click", function(event){let screenPoint = {x: event.x,y: event.y};// 开始截屏/取消截屏if(isEndDraw){view.hitTest(screenPoint).then(function(response){if(response.results[0].graphic){let graphic = response.results[0].graphic;if(graphic.attributes.clipName){switch(graphic.attributes.clipName){case "确定":let extent = tempRectangle[4].geometry.extent;clearGraphics();//	       				                	let height = printTemplate.exportOptions.width*extent.height/extent.width;let minPoint = view.toScreen({x: extent.xmin, y: extent.ymin});let maxPoint = view.toScreen({x: extent.xmax, y: extent.ymax});let width = Math.abs(maxPoint.x - minPoint.x);let height = Math.abs(maxPoint.y - minPoint.y);printTemplate.exportOptions.width = width;printTemplate.exportOptions.height = height;//	开始打印       									let printParams = new PrintParameters({view: view,template: printTemplate,extent: extent });printTask.execute(printParams).then(function(evt){//	保存至本地	       						                    	let a = document.createElement('a');a.href = evt.url;a.download = '截图.jpg';a.click();//window.open(evt.url);}, function (evt) {alert("截图失败！");});break;case "取消":clearGraphics();isEndDraw = false;break;default: break;}}}});}});//	截屏范围拖动事件监听           	let isStartDrag = false, isAllDrag = false, dragHandle = {drag: {}}, isEnableDrag = true;let allDrag = {startPoint: [], endPoint: [], orignVertices: [[], []]};let dragVertices = [[], []];view.on("pointer-down", function(event){let screenPoint = {x: event.x,y: event.y};// 开始截屏/取消截屏if(isEndDraw){view.hitTest(screenPoint).then(function(response){if(response.results[0].graphic){let graphic = response.results[0].graphic;if(graphic.attributes.clipName){switch(graphic.attributes.clipName){case "确定":break;case "取消":break;case "clipRectangle":isStartDrag = isAllDrag = true;let sGraphic = tempRectangle[1];let nGraphic = tempRectangle[3];dragVertices = [[sGraphic.geometry.x, sGraphic.geometry.y],[nGraphic.geometry.x, nGraphic.geometry.y]];let point = view.toMap(screenPoint);allDrag.startPoint = [point.x, point.y];allDrag.orignVertices = [].concat(dragVertices);//  禁止地图拖动	       										dragHandle.drag = view.on('drag',function(e){e.stopPropagation()});break;default: if(graphic.attributes.clipName.indexOf("_") > -1){//	  开始拖动顶点     										isStartDrag = true;let index = graphic.attributes.clipName.split("_")[1];let nIndex = parseInt(index) + 2;if(nIndex > 3){nIndex = nIndex - 3 - 1;}let nGraphic = tempRectangle[nIndex];dragVertices[0] = [nGraphic.geometry.x, nGraphic.geometry.y];//  禁止地图拖动	       										dragHandle.drag = view.on('drag',function(e){e.stopPropagation()});}break;}}}});}})//	监听鼠标移动事件           	view.on('pointer-move', function(evt){let screenPoint = {x: evt.x, y: evt.y};let point = view.toMap(screenPoint);if(isEndDraw){//  改变指针样式$(".esri-view-root").css("cursor", "default");view.hitTest(screenPoint).then(function(response){if(response.results[0].graphic){let graphic = response.results[0].graphic;if(graphic.attributes.clipName){switch(graphic.attributes.clipName){case "确定"://  改变指针样式$(".esri-view-root").css("cursor", "pointer");break;case "取消"://  改变指针样式$(".esri-view-root").css("cursor", "pointer");break;case "clipRectangle"://  改变指针样式$(".esri-view-root").css("cursor", "move");break;case "extent_0"://  改变指针样式$(".esri-view-root").css("cursor", "ne-resize");break;case "extent_1"://  改变指针样式$(".esri-view-root").css("cursor", "se-resize");break;case "extent_2"://  改变指针样式$(".esri-view-root").css("cursor", "sw-resize");break;case "extent_3"://  改变指针样式$(".esri-view-root").css("cursor", "se-resize");break;default: break;}}}});}//	若开始拖动           		if(isStartDrag){if(isAllDrag){//整体拖动allDrag.endPoint = [point.x, point.y];//	 xy差值         				let gapX = allDrag.endPoint[0] - allDrag.startPoint[0];let gapY = allDrag.endPoint[1] - allDrag.startPoint[1];dragVertices = [[allDrag.orignVertices[0][0] + gapX, allDrag.orignVertices[0][1] + gapY],[allDrag.orignVertices[1][0] + gapX, allDrag.orignVertices[1][1] + gapY]];let evt = {type: "vertex-drag",vertices: dragVertices}endDraw(evt);}else{//顶点拖动dragVertices[1] = [point.x, point.y];let evt = {type: "vertex-drag",vertices: dragVertices}endDraw(evt);}}});// 监听鼠标移动事件           	view.on('pointer-up', function(evt){let point = view.toMap({x: evt.x, y: evt.y});if(isStartDrag){if(isAllDrag){//整体拖动allDrag.endPoint = [point.x, point.y];//	 xy差值         				let gapX = allDrag.endPoint[0] - allDrag.startPoint[0];let gapY = allDrag.endPoint[1] - allDrag.startPoint[1];dragVertices = [[allDrag.orignVertices[0][0] + gapX, allDrag.orignVertices[0][1] + gapY],[allDrag.orignVertices[1][0] + gapX, allDrag.orignVertices[1][1] + gapY]];let evt = {type: "vertex-drag",vertices: dragVertices}endDraw(evt);//  恢复地图拖动	   dragHandle.drag.remove();isStartDrag = isAllDrag = false;allDrag = {startPoint: [], endPoint: []};}else{dragVertices[1] = [point.x, point.y];let evt = {type: "vertex-drag",vertices: dragVertices}endDraw(evt);//  恢复地图拖动	   dragHandle.drag.remove();isStartDrag = false;}}});        });           });</script>
</head><body><div id="viewDiv"></div><div id="screenshot" class="esri-widget-button esri-widget esri-interactive" title="截图"><a role="tab" data-toggle="tab" class="esri-icon-applications"></a></div>
</body>
</html>

说明：该代码不太好 只实现了功能 在性能上和代码上还需优化！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/245758.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV图像的基本操作

OpenCV图像的基本操作

图像的基本操作&#xff08;Python&#xff09; 素材图 P1&#xff1a;die.jpg P2&#xff1a;cool.jpg V&#xff1a;rabbit.mp4&#xff0c; 下载地址 读取展示-图像 import cv2img_1 cv2.imread(./die.jpg) # default cv2.IMREAD_COLOR print("die.jpg shape(imre…
阅读更多...
【论文笔记】Learning Deconvolution Network for Semantic Segmentation

【论文笔记】Learning Deconvolution Network for Semantic Segmentation

重要说明&#xff1a;严格来说&#xff0c;论文所指的反卷积并不是真正的 deconvolution network 。 关于 deconvolution network 的详细介绍&#xff0c;请参考另一篇博客&#xff1a;什么是Deconvolutional Network&#xff1f; 一、参考资料 Learning Deconvolution Netwo…
阅读更多...
uniapp组件库Line 线条 的适用方法

uniapp组件库Line 线条 的适用方法

目录 #平台差异说明 #基本使用 #线条类型 1.3.7 #兼容性 #API #Props 此组件一般用于显示一根线条&#xff0c;用于分隔内容块&#xff0c;有横向和竖向两种模式&#xff0c;且能设置0.5px线条&#xff0c;使用也很简单。 #平台差异说明 AppH5微信小程序支付宝小程序百…
阅读更多...
算法：日志采集系统

算法：日志采集系统

一、算法描述 题目 日志采集是运维系统的的核心组件。日志是按行生成&#xff0c;每行记做一条&#xff0c;由采集系统分批上报。如果上报太频繁&#xff0c; 会对服务端造成压力&#xff1b;如果上报太晚&#xff0c;会降低用户的体验&#xff1b;如果一次上报的条数太多&…
阅读更多...
Java和Redis实现一个简单的热搜功能

Java和Redis实现一个简单的热搜功能

1. 前言 我们有一个简单的需求&#xff1a; 搜索栏展示当前登陆的个人用户的搜索历史记录&#xff0c;删除个人历史记录。用户在搜索栏输入某字符&#xff0c;则将该字符记录下来 以zset格式存储的redis中&#xff0c;记录该字符被搜索的个数以及当前的时间戳 &#xff08;用…
阅读更多...
使用DBSyncer同步Oracle11g数据到Mysql5.7中_实现全量数据同步和增量数据实时同步_操作过程---数据同步之DBSyncer工作笔记007

使用DBSyncer同步Oracle11g数据到Mysql5.7中_实现全量数据同步和增量数据实时同步_操作过程---数据同步之DBSyncer工作笔记007

之前都是用mysql和Postgresql之间进行同步的,已经实现了数据的实时同步,现在要实现Oracle数据库到Mysql数据库的全量,以及增量同步. 因为之前配置的不对,这里架构名写成了orcl,所以导致,虽然能连接上,但是,在进行数据同步的时候,看不到表,所以这里说一下如何进行连接 这里,首先…
阅读更多...
代码随想录算法训练营第30天 | 回溯总结 + 3道Hard题目

代码随想录算法训练营第30天 | 回溯总结 + 3道Hard题目

今日任务 332.重新安排行程 51. N皇后 37. 解数独 总结 总结 回溯总结&#xff1a;代码随想录 回溯是递归的副产品&#xff0c;只要有递归就会有回溯&#xff0c;所以回溯法也经常和二叉树遍历&#xff0c;深度优先搜索混在一起&#xff0c;因为这两种方式都是用了递归。 …
阅读更多...
Azure AI - 沉浸式阅读器，阅读障碍用户福音

Azure AI - 沉浸式阅读器，阅读障碍用户福音

目录 一、什么是沉浸式阅读器将内容划分开来提高可读性显示常用字词的图片突出显示语音的各个部分朗读内容实时翻译内容将单词拆分为音节 二、沉浸式阅读器如何工作&#xff1f;环境准备创建 Web 应用项目设置身份验证配置身份验证值安装标识客户端 NuGet 包更新控制器以获取令…
阅读更多...
防火墙在企业园区出口安全方案中的应用(ENSP实现)

防火墙在企业园区出口安全方案中的应用(ENSP实现)

拓扑图 需求&#xff1a; 1、企业出口网关设备必须具备较高的可靠性&#xff0c;为了避免单点故障&#xff0c;要求两台设备形成双机热备状态。当一台设备发生故障时&#xff0c;另一台设备会接替其工作&#xff0c;不会影响业务正常运行。 2、企业从两个ISP租用了两条链路&…
阅读更多...
HTML-表格

HTML-表格

表格 1.基本结构 一个完整的表格由&#xff1a;表格标题、表格头部、表格主体、表格脚注&#xff0c;四部分组成 表格涉及到的标签&#xff1a; table&#xff1a;表格 caption&#xff1a;标题 thead&#xff1a;表格头部 tbody&#xff1a;表格主体 tfoot&#xff1a;表格注…
阅读更多...
算法基础之树状数组

算法基础之树状数组

文章目录 树状数组 树状数组 树状数组能解决的最关键的问题就是能够 O ( log ⁡ n ) O(\log n) O(logn)内&#xff0c;给某个位置上的数&#xff0c;加上一个数&#xff0c;或者求前缀和 他和前缀和数组的区别就是&#xff0c;树状数组支持修改原数组的内容&#xff0c;而前缀…
阅读更多...
2.数据结构 顺序表（自留笔记）

2.数据结构 顺序表（自留笔记）

文章目录 一.静态顺序表&#xff1a;长度固定二.动态顺序表1.下面证明原地扩容和异地扩容代码如下&#xff1a;2.下面是写一段Print&#xff0c;打印数字看看&#xff1a;3.头插4.尾删5.头删6.越界一定会报错吗7.下标插入8.下标删除9.查找数字10.应用&#xff1a;利用顺序表写一…
阅读更多...
多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测效果一览基本介绍程序设计参考资…
阅读更多...
项目测试 手机系统 改串号 写IMEI 改MEID 改手机型号 等信息配置信息 演示视频 和一键新机

项目测试 手机系统 改串号 写IMEI 改MEID 改手机型号 等信息配置信息 演示视频 和一键新机

项目测试 手机系统 改串号 写IMEI 改MEID 改手机型号 等信息配置信息 演示视频 和配置说明 项目-手机系统支持直接改串号 IMEI MEID 手机型号 等信息配置信息 演示视频 支持 条形码 SN IMEI 1 IMEI 2 MEID 唯一SN 蓝牙地址 wifi地址 mac "一键新机"这个术语通常出现…
阅读更多...
HTML-表单

HTML-表单

表单 概念&#xff1a;一个包含交互的区域&#xff0c;用于收集用户提供的数据。 1.基本结构 示例代码&#xff1a; <form action"https://www.baidu.com/s" target"_blank" method"get"><input type"text" name"wd&q…
阅读更多...
Spring 的存储和获取Bean

Spring 的存储和获取Bean

文章目录 获取 Spring 上下文对象的方式存储 Bean 对象的方式类注解配置扫描路径&#xff08;必须&#xff09;Controller&#xff08;控制器存储&#xff09;Service&#xff08;服务&#xff09;Repository&#xff08;持久层&#xff09;Component&#xff08;工具&#xff…
阅读更多...
【WPF.NET开发】WPF 中的 Layout

【WPF.NET开发】WPF 中的 Layout

本文内容 元素边界框布局系统测量和排列子元素面板元素和自定义布局行为布局性能注意事项子像素渲染和布局舍入 本主题介绍 Windows Presentation Foundation (WPF) 布局系统。 了解布局计算发生的方式和时间对于在 WPF 中创建用户界面非常重要。 1、元素边界框 在 WPF 中构…
阅读更多...
【mongoDB】集合的创建和删除

【mongoDB】集合的创建和删除

目录 1.集合的创建 2. 查看所有集合 3.删除集合 1.集合的创建 格式&#xff1a; db.createCollection ( name ) 例如创建一个名为 bbb 的集合 还可以通过传递一个选项对象来指定集合的属性&#xff0c;例如最大文档的大小&#xff0c;索引选项等 例如 这样创建了一个名为 cc…
阅读更多...
TCP 三次握手以及滑动窗口

TCP 三次握手以及滑动窗口

TCP 三次握手 简介&#xff1a; TCP 是一种面向连接的单播协议&#xff0c;在发送数据前&#xff0c;通信双方必须在彼此间建立一条连接。所谓的 “ 连接” &#xff0c;其实是客户端和服务器的内存里保存的一份关于对方的信息&#xff0c;如 IP 地址、端口号等。 TCP 可以…
阅读更多...
人工智能的未来展望：自然语言处理（NLP）与计算机视觉（CV）

人工智能的未来展望：自然语言处理（NLP）与计算机视觉（CV）

NLP和CV是人工智能的两个重要分支&#xff0c;它们在处理和分析信息方面有不同的侧重点和挑战。 NLP&#xff08;自然语言处理&#xff09;旨在让计算机理解和生成人类语言&#xff0c;主要处理的是文本信息。NLP的研究和应用主要集中在如何让计算机理解和生成人类语言&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023