本文介绍如何在ArcGIS for JavaScript中实现地图截图与打印功能。截图通过获取地图图像并转换为Blob保存；打印则利用内置打印组件，支持格式与方向选择。需注意使用MapImageLayer等图层时打印可能失效，建议配置自有ArcGIS Server服务以确保持久稳定。
地图截图
效果展示
实现步骤
复制代码即可运行测试。
如需实现更复杂的截图保存逻辑，可参考官方提供的案例。
<!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>注意事项
建议打印服务使用自有的ArcGIS Server服务，具体开启方式可自行搜索或咨询公司GIS工程师。
至此，关于ArcGIS for JavaScript实现地图截图与打印功能的介绍完毕。如需了解更多相关内容，请搜索本站历史文章或继续浏览后续文章，感谢支持。