arcgis for js实现地图截图、地图打印功能

更新时间：2024年12月21日 12:13:15 作者：我不当帕鲁谁当帕鲁

这篇文章主要介绍了arcgis for js实现地图截图、地图打印功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

地图截图

效果

实现

复制运行即可

要实现复杂的截图保存可以参考官网案例

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #mapview {
        width: 100vw;
        height: 100vh;
      }
      * {
        margin: 0;
        padding: 0;
      }
      #btn {
        position: fixed;
        right: 30px;
        top: 10px;
        z-index: 999;
        width: 100px;
        height: 40px;
        cursor: pointer;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" rel="external nofollow"  rel="external nofollow"  />
    <script src="https://js.arcgis.com/4.23/"></script>
  </head>
  <body>
    <button id="btn">地图截图</button>
    <div id="mapview"></div>
    <script>
      require(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer'], function (
        Map,
        MapView,
        FeatureLayer
      ) {
        // 初始化底图
        window.map = new Map({
          basemap: 'dark-gray-vector'
        })
        // 创建2维视图
        let view = new MapView({
          container: 'mapview',
          map: map,
          zoom: 11,
          center: [104.783916597735, 32.55699155692144] // 设置地图的初始化中心点坐标
        })
        document.querySelector('#btn').addEventListener('click', function () {
          view
            .takeScreenshot({
              area: {
                x: 0,
                y: 0,
                width: view.width,
                height: view.height
              },
              format: 'png'
            })
            .then(screenshot => {
              // 直接下载
              const base64 = screenshot.dataUrl.toString() // imgSrc 就是base64哈
              const byteCharacters = atob(base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''))
              const byteNumbers = new Array(byteCharacters.length)
              for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i)
              }
              const byteArray = new Uint8Array(byteNumbers)
              const blob = new Blob([byteArray], {
                type: undefined
              })
              const aLink = document.createElement('a')
              aLink.download = '图片名称.jpg' //这里写保存时的图片名称
              aLink.href = URL.createObjectURL(blob)
              aLink.setAttribute('crossOrigin', 'anonymous')
              aLink.click()
            })
        })
      })
    </script>
  </body>
</html>

地图打印

使用arcgis自带的打印组件，可自选导出格式，方向等等

缺点是如果地图上有MapImageLayer等图层就会失效

效果

实现

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #mapview {
        width: 100vw;
        height: 100vh;
      }
      * {
        margin: 0;
        padding: 0;
      }
      #btn {
        position: fixed;
        right: 30px;
        top: 10px;
        z-index: 999;
        width: 100px;
        height: 40px;
        cursor: pointer;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" rel="external nofollow"  rel="external nofollow"  />
    <script src="https://js.arcgis.com/4.23/"></script>
  </head>
  <body>
    <button id="btn">地图打印</button>
    <div id="mapview"></div>
    <script>
      require([
        'esri/Map',
        'esri/views/MapView',
        'esri/layers/FeatureLayer',
        'esri/Graphic',
        'esri/widgets/Print'
      ], function (Map, MapView, FeatureLayer, Graphic, Print) {
        // 初始化底图
        window.map = new Map({
          basemap: 'dark-gray-vector'
        })
        // 创建2维视图
        let view = new MapView({
          container: 'mapview',
          map: map,
          zoom: 11,
          center: [104.783916597735, 32.55699155692144] // 设置地图的初始化中心点坐标
        })
        document.querySelector('#btn').addEventListener('click', function () {
          const print = new Print({
            view: view,
            label: '提取',
            // 最好指定为自己的打印服务
            printServiceUrl: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
          })
          // 将小部件添加到视图的右下角
          view.ui.add(print, 'bottom-right')
        })
      })
    </script>
  </body>
</html>

注意

打印服务最好使用自己的arcgisServer服务, 如何开启自行百度，当然这种事直接呼叫公司gis工程师咯

到此这篇关于arcgis for js实现地图截图、地图打印的文章就介绍到这了,更多相关arcgis for js地图截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js贪吃蛇游戏实现思路和源码
这篇文章主要为大家介绍了js贪吃蛇游戏实现思路，并分享贪吃蛇游戏源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-04-04
JavaScript鼠标移动事件以及实战案例
在学习JS中我对鼠标移动事件进行了一些总结,需要的可以作参考,下面这篇文章主要给大家介绍了关于JavaScript鼠标移动事件以及实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
常用的JavaScript验证正则表达式汇总
这篇文章主要是对常用的JavaScript验证正则表达式进行了详细的汇总介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
关于Javascript中defer和async的区别总结
相信看过javascript高级程序设计的人，在javascript高级程序设计里，应该看到了介绍了有关defer和async的区别，可是比较浅显，而且也说得不是很清楚。下面我们来通过这篇文章来详细了解下dfer和async的区别。
2016-09-09
electron如何使用typescript
引入 TypeScript 到 Electron 项目可以帮助你捕捉错误并在编写代码时提供更好的自动完成和文档，这篇文章主要介绍了electron使用typescript的步骤,需要的朋友可以参考下
2024-04-04
JavaScript超详细实现网页轮播图
这篇文章主要介绍了JavaScript超详细实现网页轮播图,我们经常会看到各种轮播图的效果，它们到底是怎样实现的呢？今天我们就一起来看一下具体实现方法吧
2021-12-12
JS实现多选框的操作
这篇文章主要为大家详细介绍了JS实现多选框的操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
JS 实现导航栏悬停效果(续2)
发现原来的方法还有是有几个问题：首先Js代码冗余，导航条上的Tab是用js实现跳转而不是超链接，还有导航条本身用fixed定位，但没有被设置为水平居中，而是在JS中更改left值使其居中
2013-09-09
vue 自定义指令directive的使用场景
这篇文章主要详细介绍了vue 自定义指令directive的使用场景，文中有详细的代码示例，感兴趣的小伙伴欢迎阅读
2023-04-04
TypeScript新特性之using关键字的使用方法
TypeScript 5.2版本中新添加了using关键字,目前该关键字的提案也进入了ECMAScript的Stage 3,也就是说很快就会进入JavaScript语言本身中,using和const, let和var一样都是用于变量声明的,那么它到底有什么与众不同的地方呢,本文给大家介绍的非常详细
2023-11-11