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>
说明：该代码不太好 只实现了功能 在性能上和代码上还需优化！！！
相关文章：
arcgis实现截图/截屏功能
arcgis实现截图/截屏功能 文章目录 arcgis实现截图/截屏功能前言效果展示相关代码 前言 本篇将使用arcgis实现截图/截屏功能，类似于qq截图 效果展示 相关代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta nam…...
mysql备份
1.新建备份目录 mkdir -p /data/mysql_dump/#查找mysql配置位置 find / -name "my.cnf" find / -name "mysql.sock" find / -name "mysqldump"2.定时任务 #每天凌晨备份一次 echo "00 00 * * * root /data/mysql_bak.sh" >> /…...
CentOS7 安装PostgreSQL以及配置服务
文章目录 前言1. 安装步骤2. 连接PostgreSQL3. 配置服务配置文件所在路径设置监听地址修改数据库密码已经修改了密码，为什么没有生效？不需要密码就可以连接？设置访问权限4. 新的配置生效前言 PostgreSQL是一种功能强大的开源关系型数据库管理系统，被广泛用于各种应用程序和…...
React 表单、处理受控表单组件、非受控组件
React 表单处理 学习目标： 能够使用受控组件的方式获取文本框 使用 React 处理表单一般有两种方法 受控组件 （推荐）非受控组件 （了解） 1. 受控表单组件 什么是受控组件？ input 框自己的状态被 React 组…...
Android开发--状态栏布局隐藏的方法
1.问题如下，安卓布局很不协调 2.先将ActionBar设置为NoActionBar 先打开styles.xml 3.使用工具类 package com.afison.newfault.utils;import android.annotation.TargetApi; import android.app.Activity; import android.content.Context; import android.graph…...
GaussDB如何创建和管理序列、定时任务
前言 GaussDB是华为自主创新研发的分布式关系型数据库，为企业提供功能全面、稳定可靠、扩展性强、性能优越的企业级数据库服务。在实际业务场景使用中，为了提高工作效率，数据库GaussDB提供定时任务的功能，本节为大家讲解GaussDB如…...
mybatis-plus:代码生成器
一、依赖 代码生成器需要添加一下依赖 <dependencies><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.0.7.1</version></dependency><!-- https://mvnre…...
几款提高开发效率的Idea 插件
1、ignore 开发代码过程中经常会有一些需要提交到代码仓库的文件，比如java文件生成的.class、.jar 等，如果将编译后的文件都提交到代码库那么代码库会很大，关键是没有必要。 这款插件就可以很方便的解决某类文件或者某个文件夹不需要提交到…...
Redisson 分布式锁可重入的原理
目录 1. 使用 Redis 实现分布式锁存在的问题 2. Redisson 的分布式锁解决不可重入问题的原理 1. 使用 Redis 实现分布式锁存在的问题 不可重入：同一个线程无法两次 / 多次获取锁举例 method1 执行需要获取锁method2 执行也需要（同一把）锁如…...
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word等office文件
1、Office Web(微软的开发接口) 优点 没有 Office也可以直接查看Office 文件适用于移动端、PC无需下载文件就可以在浏览器中查看 <iframe src"文档地址" frameborder"0" /> const docUrl 外网可预览的地址 const url encodeURIComponent(docUrl…...
【一站解决您的问题】mac 利用命令升级nodejs、npm、安装Nodejs的多版本管理器n、nodejs下载地址
一：下载nodejs 官网地址，点击下载稳定版 https://nodejs.org/en 如果官网下载特别慢，可以点击这个地址下载 点击这里 https://nodejs.cn/download/current/ 安装完成后，就包含了nodejs 和 npm。此时您的版本就是下载安装的版本…...
【RabbitMQ】死信（延迟队列）的使用
目录 一、介绍 1、什么是死信队列(延迟队列) 2、应用场景 3、死信队列(延迟队列)的使用 4、死信消息来源 二、案例实践 1、案例一 2、案例二（消息接收确认 ） 3、总结 一、介绍 1、什么是死信队列(延迟队列) 死信，在官网中对应的单词…...
java 解析word模板（2024-01-25）
本文主要功能是解析word模板 这是一个word解析类，因为我做的系统用到了而且没有可用的帮助类，只能自己写。之前的实现方式是freemarker 模板解析。但是这次要求用poi不在使用freemarker。实现功能比较少，主要是满足开发需求即可，没…...
flutter-相关个人记录
1、flutter 安卓打包打包报错 flutter build apk -v --no-tree-shake-icons 2、获取华为指纹证书命令 keytool -list -v -keystore ***.jks 3、IOS项目中私有方法查找隐藏文件中 1、cd 项目目录地址 2、grep -r xerbla. "xerbla"为需要查找的关键字 3…...
互斥锁/读写锁（Linux）
一、互斥锁 临界资源概念： 不能同时访问的资源，比如写文件，只能由一个线程写，同时写会写乱。 比如外设打印机，打印的时候只能由一个程序使用。 外设基本上都是不能共享的资源。 生活中比如卫生间，同一…...
Jackson序列化Bean额外属性附加--@JsonAnyGetter、@JsonUnwrapped用户
1. 场景 有一项工作，需要将数据从一个服务S中读取出来（得到的是一个JSON），将数据解析转换以后构造成一个数组的类型A的对象，写入到一个服务T中。 A.class Data public class A {String f0 ;String f1 ; }在发现需要…...
排序算法——冒泡排序算法详解
冒泡排序算法详解 1.引言2.算法概览2.1输入处理2.2核心算法步骤2.3数据结构2.4复杂度分析 3.算法优化4.边界条件和异常处理5.实验和测试6.应用和扩展7.代码示例8.总结 1.引言 冒泡排序是一种简单而直观的比较排序算法，它通过多次遍历数组，比较相邻元素并…...
宋仕强论道之华强北的缺货潮（十六）
始于2019年缺货潮让华强北又生产一大批亿万富翁，缺货的原因主要是：首先，疫情封控导致大量白领在家远程办公，需要购买电脑、打印机等办公设备，同时孩子们也要在家上网课，进一步增加对电子智能终端产品的需求…...
登录注册页面
前提：基于element-ui环境 模态登录组件 分析Login.vue <template><div class"login"><span click"handleClose">X</span></div> </template><script> export default {name: "Login",m…...
视频美颜SDK详解：动态贴纸技术的前沿探索
当下，美颜SDK的动态贴纸技术作为视频美颜的独特亮点，吸引了越来越多开发者和用户的关注。 一、技术详解 动态贴纸技术是视频美颜SDK中的一项创新性功能，它通过在实时视频中添加各种动态效果，为用户提供更加生动有趣的拍摄体验。…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗？ 在ComfyUI中实现图生视频并延长到5秒，需要结合多个扩展和技巧。以下是完整解决方案： 核心工作流配置（24fps下5秒120帧） #mermaid-svg-yP…...