周末事情太多了，以后就工作日发布随笔吧。周末的话，看心情，也许也会发~

今天的实例代码解析是Take a screenshot of a SceneView，也就是获取快照，话不多说，进入正题。

首先，官方网址的位置为：https://developers.arcgis.com/javascript/latest/sample-code/sceneview-screenshot/index.html

截图：

接下来进入代码的解析部分

第一段：

这一部分没有什么难度，就是加载地图。如果还能记得SceneView是3D视图，MapView是2D视图，就足够了。

第二段：

所谓蒙版，就是当用户要进行截图时所需的容器

其中有一个view.ui.empty()方法，遇到不懂的方法就去API REFERENCE里面查找，很容易找到解释。这里是介绍看代码的方法。

第三段：

首先对快照按钮的click事件进行监听，此时开始进入截屏；然后对视图的拖动事件进行监听，对截屏的一些属性进行保存显示在预览DIv容器中

第四段：

第五段：

第六段：

最后附上全部代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  7.     <title>Take a screenshot of a SceneView - 4.10</title>
  8.     <link rel="stylesheet" href="http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/esri/css/main.css">
  9.     <script src="http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/dojo/dojo.js"></script>
  10.     <script>
  11.  
  12.     require([
  13.         "esri/WebScene",//网络场景
  14.         "esri/views/SceneView"//3D视图，上一篇提到：2D视图为MapView
  15.         ], function(WebScene, SceneView) {//两个参数，顺序不能改变，其他的不重复
  16.  
  17.             const webscene = new WebScene({
  18.                 portalItem: {
  19.                 id: "19dcff93eeb64f208d09d328656dd492"
  20.                 }
  21.             });
  22.  
  23.             const view = new SceneView({
  24.                 map: webscene,
  25.                 container: "viewDiv"
  26.             });
  27.  
  28.             // 从这里开始要进行截图操作了
  29.             const screenshotBtn = document.getElementById("screenshotBtn");//getElementById方法用于获得HTML的元素"screenshotBtn",也就是快照按钮
  30.  
  31.             const maskDiv = document.getElementById("maskDiv");//获取元素"maskdiv"，用于选择区域的蒙版
  32.  
  33.             const screenshotDiv = document.getElementById("screenshotDiv");//用于显示打印预览的元素
  34.  
  35.             view.ui.empty("top-left");//地图默认左上角有一些小部件，比如放大缩小，这里清空这些小部件
  36.             view.ui.add(screenshotBtn, "top-left");//将快照按钮放置于左上角
  37.  
  38.             screenshotBtn.addEventListener("click", function() { //添加事件监听方法，以进入区域选择模式
  39.  
  40.                 screenshotBtn.classList.add("active");//把"active"类添加到screenshotBtn按钮元素上
  41.                 view.container.classList.add("screenshotCursor");//设置视图的container，添加"screenshotCursor"类，这里cursor意思为指针
  42.                 let area = null;//设置区域为空
  43.  
  44.                 const dragHandler = view.on("drag", function (event) {//侦听拖动事件并计算所选区域
  45.  
  46.                     event.stopPropagation();//阻止视图中的导航，通俗点讲就是固定界面不懂
  47.  
  48.                     if (event.action !== "end") {// 当用户开始拖动或者正在拖动
  49.                         , view.width);//clamp函数，限制随机变化的值于一个给定的区间也就是最小为0，最大为view.width
  50.                         , view.width);//同理
  51.                         , view.height);
  52.                         , view.height);
  53.                         area = {//定义区域
  54.                             x: xmin,
  55.                             y: ymin,
  56.                             width: xmax - xmin,
  57.                             height: ymax - ymin
  58.                         };
  59.                         setMaskPosition(area);//设置标记所选区域的div元素的位置
  60.                     }
  61.                     else {//当用户停止拖动
  62.  
  63.                         dragHandler.remove();//将拖动事件监听移除SceneView
  64.  
  65.                         view.takeScreenshot({ area: area, format: "png" }).then(function (screenshot) {//创建当前视图的屏幕快照
  66.  
  67.                             showPreview(screenshot);//显示照片预览
  68.  
  69.                             document.getElementById("downloadBtn").onclick = function() {//创建供下载的照片
  70.  
  71.                                 const text = document.getElementById("textInput").value;//设置图片保存的名称
  72.  
  73.                                 if (text) {//如果text不为空
  74.                                     const dataUrl = getImageWithText(screenshot, text);
  75.                                     downloadImage(webscene.portalItem.title + ".png", dataUrl);
  76.                                 }
  77.                                 else {//否则，仅仅下载快照
  78.                                     downloadImage(webscene.portalItem.title + ".png", screenshot.dataUrl);
  79.                                 }
  80.                             }
  81.  
  82.                             screenshotBtn.classList.remove("active");//将"active"类移除screenshotBtn
  83.                             view.container.classList.remove("screenshotCursor");//将快照光标移除视图的容器
  84.                             setMaskPosition(null);//设置蒙版位置为空
  85.                         });
  86.                     }
  87.                 });
  88.  
  89.                 function setMaskPosition(area) {//设置蒙版位置，参数为area区域
  90.                     if (area) {//如果存在area
  91.                         maskDiv.classList.remove("hide");//maskDiv蒙版元素移除"hide"类，也就是不隐藏
  92.                         maskDiv.style.left = area.x + "px";//设置位置
  93.                         maskDiv.style.top = area.y + "px";
  94.                         maskDiv.style.width = area.width + "px";
  95.                         maskDiv.style.height = area.height + "px";
  96.                     }
  97.                     else {//如果不存在
  98.                         maskDiv.classList.add("hide");//maskDiv蒙版元素设置为隐藏
  99.                     }
  100.                 }
  101.  
  102.                 function clamp(value, from, to) {
  103.                     return value < from ? from : value > to ? to : value;//运算符表达式如果小于from则取from的值，如果大于to则取to的值，如果在中间则去value的值
  104.                 }
  105.  
  106.             });
  107.  
  108.             function showPreview(screenshot) {//创建一个将附加到DOM的图像，以便用户能够预览将要下载的内容
  109.                 screenshotDiv.classList.remove("hide"); //screenshotDiv元素不在隐藏
  110.                 ];
  111.                 screenshotImage.width = screenshot.data.width;
  112.                 screenshotImage.height = screenshot.data.height;
  113.                 screenshotImage.src =  screenshot.dataUrl;//设置快照图像的源为快照的dataUrl
  114.             }
  115.  
  116.             function getImageWithText(screenshot, text) {//返回通过向webscene图像添加自定义文本创建的新图像
  117.  
  118.                 const imageData = screenshot.data;
  119.  
  120.                 // 为了将文本添加到屏幕快照中，我们创建了一个新的画布("canvas")元素
  121.                 const canvas = document.createElement("canvas");
  122.                 const context = canvas.getContext("2d");//返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
  123.                 canvas.height = imageData.height;
  124.                 canvas.width = imageData.width;
  125.  
  126.                 context.putImageData(imageData, , );//将快照数据放于画布
  127.                 context.font = "20px Arial";//设置字体
  128.                 context.fillStyle="#000";//设置填充绘画的颜色、渐变或模式
  129.                 context.fillRect(, imageData.height - , context.measureText(text).width + , );//绘制"被填充"的矩形
  130.  
  131.                 // 从textInput元素添加文本
  132.                 context.fillStyle="#fff";
  133.                 context.fillText(text, , imageData.height - );
  134.  
  135.                 return canvas.toDataURL();//HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。
  136.             }
  137.  
  138.             function downloadImage(filename, dataUrl) {
  139.  
  140.                 // 下载在微软浏览器中处理方式不同，因为不支持<a>元素的下载属性
  141.                 if (!window.navigator.msSaveOrOpenBlob) {
  142.  
  143.                     // 在支持下载属性的浏览器中，一个链接被创建，一个程序化的点击将触发下载
  144.                     const element = document.createElement("a");
  145.                     element.setAttribute("href", dataUrl);
  146.                     element.setAttribute("download", filename);
  147.                     element.style.display = "none";
  148.                     document.body.appendChild(element);
  149.                     element.click();
  150.                     document.body.removeChild(element);
  151.                 }
  152.                 else {
  153.                     // 对于MS浏览器，将dataUrl转换为Blob
  154.                     ]);//atob是进行解码的方法
  155.                     ].split(].split(]
  156.                     const ab = new ArrayBuffer(byteString.length);
  157.                     const ia = new Uint8Array(ab);
  158.                     ; i < byteString.length; i++) {
  159.                         ia[i] = byteString.charCodeAt(i);
  160.                     }
  161.                     const blob = new Blob([ab], {type: mimeString});
  162.                     //下载图片
  163.                     window.navigator.msSaveOrOpenBlob(blob, filename);
  164.                 }
  165.  
  166.             }
  167.             document.getElementById("closeBtn").addEventListener("click", function () {//按钮隐藏打印预览html元素
  168.                 screenshotDiv.classList.add("hide");
  169.             });
  170.         });
  171.     </script>
  172.     <style>
  173.         html,
  174.         body,
  175.         #viewDiv {
  176.             padding: ;
  177.             margin: ;
  178.             height: %;
  179.             width: %;
  180.             font-family: Helvetica, Arial, sans-serif;
  181.         }
  182.  
  183.         #screenshotDiv {
  184.             position: absolute;
  185.             top: ;
  186.             left: ;
  187.             right: ;
  188.             bottom: ;
  189.             text-align: center;
  190.             background-color: rgba(, , , 0.8);
  191.         }
  192.  
  193.         .hide {
  194.             display: none;
  195.         }
  196.  
  197.         img {
  198.             border: 10px solid white;
  199.             box-shadow: 2px 2px 5px  rgba(, , , 0.5);
  200.         }
  201.  
  202.         #screenshotDiv > * {
  203.             margin: .5em;
  204.         }
  205.  
  206.         .screenshotCursor {
  207.             cursor: crosshair;
  208.         }
  209.  
  210.         .action-button {
  211.             padding: .6em;
  212.             border: 1px solid #0079c1;
  213.             text-align: center;
  214.             background-color: white;
  215.             cursor: pointer;
  216.         }
  217.  
  218.             .action-button:hover,
  219.             .action-button:focus {
  220.                 background: #0079c1;
  221.                 color: white;
  222.             }
  223.  
  224.         #maskDiv {
  225.             position: absolute;
  226.             background: rgba(, , , 0.1);
  227.             border: 2px dashed rgb(, , );
  228.         }
  229.     </style>
  230. </head>
  231.  
  232. <body>
  233.     <div id="viewDiv">
  234.         <button id="screenshotBtn" class="action-button esri-widget" aria-label="Select screenshot area"
  235.                 title="Select screenshot area">
  236.             Select
  237.             screenshot area
  238.         </button>
  239.     </div>
  240.     <div id="screenshotDiv" class="hide">
  241.         <img class="js-screenshot-image">
  242.         <div>
  243.             <label>Set a text to be displayed on the image: </label><input type="text"
  244.                                                                            placeholder="Image text" id="textInput" autofocus>
  245.         </div>
  246.         <button id="downloadBtn" class="action-button" aria-label="Download image"
  247.                 title="Download image">
  248.             Download image
  249.         </button>
  250.         <button id="closeBtn" class="action-button" aria-label="Back to webscene"
  251.                 title="Back to webscene">
  252.             Back to webscene
  253.         </button>
  254.     </div>
  255.     <div id="maskDiv" class="hide screenshotCursor"></div>
  256. </body>
  257.  
  258. </html>

Sample Code之Take a screenshot of a SceneView的更多相关文章

  1. android studio2.2 的Find Sample Code点击没有反应

    1 . 出现的问题描述:           右键点击Find Sample Code后半天没有反应,然后提示 Samples are currently unavailable for :{**** ...

  2. 如何将经纬度利用Google Map API显示C# VS2005 Sample Code

    原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...

  3. IOS开发苹果官方Sample Code及下载地址

    IOS开发苹果官方Sample Code及下载地址 在线浏览地址:https://developer.apple.com/library/ios/navigation/#section=Resourc ...

  4. OAF Sample Code(转)

    原文地址: OAF Sample Code

  5. Sample Code之Web scene-slides

    这是我的第一篇随笔,在开始正文前说几句. 这个系列会记录我学习Arcgis js API 4.10的全过程,希望能对自己也对其他有需要的人有帮助.很多时候上网看一些大神的帖子会感到一头雾水,一是自己水 ...

  6. sample code java pom.xml

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  7. sqoop sample code

    本文使用的数据库是mysql的sample database employees. download url:https://launchpad.net/test-db/employees-db-1/ ...

  8. Sample Code for Qp_preq_pub.Price_request Api to Simulate an Ask for Promotion Modifier

    DECLARE p_line_tbl QP_PREQ_GRP.LINE_TBL_TYPE; p_qual_tbl QP_PREQ_GRP.QUAL_TBL_TYPE; p_line_attr_tbl ...

  9. 虹软人脸识别Android Sample Code

    AFR_FSDKInterface engine = new AFR_FSDKEngine(); //用来存放提取到的人脸信息, face_1 是注册的人脸,face_2 是要识别的人脸 AFR_FS ...

随机推荐

  1. torch.nn.LSTM()函数维度详解

    123456789101112lstm=nn.LSTM(input_size,                     hidden_size,                      num_la ...

  2. 2014年NOIP普及组复赛题解

    题目涉及算法: 珠心算测验:枚举: 比例简化:枚举: 螺旋矩阵:模拟: 子矩阵:状态压缩/枚举/动态规划 珠心算测验 题目链接:https://www.luogu.org/problem/P2141 ...

  3. window 系统下修改`CMD`的编码格式的方法，`CHCP` 的 使用

    CHCP的使用 CHCP是一个计算机指令,能够显示或设置活动代码页编号. 一般上是在命令提示框中使用,用来查询和修改命令提示框的编码格式 具体使用方法 查看活动代码页编号 方式1: >>& ...

  4. 如何理解springMVC?

    springMVC 工作原理? 简单理解:客户端发送请求-->前端控制器接受客户端的请求DispathServelt-->找到处理器映射HandMapping-->找到处理器hand ...

  5. H3C STP的作用

  6. linux Do-it-yourself 探测

    探测也可以在驱动自身实现没有太大麻烦. 它是一个少有的驱动必须实现它自己的探测, 但是看它是如何工作的能够给出对这个过程的内部认识. 为此目的, short 模块进行 do- it-yourself ...

  7. IntPtr、Struct 相互转换

    一般写c#代码基本用不到 相互转换 只有调用c++中的dll动态库的时候才用的到 struct转intptr public static IntPtr StructToIntPtr<T>( ...

  8. UI自动化测试框架 ---TestCafe

    UI自动化测试框架 ---TestCafe 官网文档链接: https://devexpress.github.io/testcafe/ https://devexpress.github.io/te ...

  9. 缓存, 队列(Redis,RabbitMQ)

    Redis Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  10. 个人项目之数独的生成与数独残局求解——C语言实现

    点击获取项目文件 1.对项目的分析与初步计划: 起初拿到这个项目是非常懵逼的,因为涉及到很多个人的知识盲区,诸如:C语言文件的操作.命令行参数.Code Quality Analysis工具.性能分析 ...