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" /><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" /><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工程師咯

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/63415.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/63415.shtml
英文地址，請注明出處：http://en.pswp.cn/web/63415.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！