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"  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'
        })
        // 創(chuàng)建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"  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'
        })
        // 創(chuàng)建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>