mapboxgl-print-tool
Version:
39 lines (38 loc) • 1.46 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<!--下载图片-->
<script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js"></script>
<!--引用-->
<script src="https://cdn.jsdelivr.net/npm/mapboxgl-print-tool@1.0.5/dist/index.js"></script>
<!--<script src="../dist/index.js"></script>-->
<style>
body,html {height: 100%;width: 100%; margin: 0; padding: 0; }
</style>
</head>
<body >
<div id='map' style="height: 100%;width: 100%"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamVyY2t5IiwiYSI6ImNqYjI5dWp3dzI1Y2YzMnM3eG0xNnV3bWsifQ.eQp4goc9Ng8SuEZcdgNJ_g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
preserveDrawingBuffer:true //canvas toDataURL
});
const mapPrint = new MapPrintTool({
enableImg:true, //是否出图
fileName:'mapDemo.png' // 文件名
})
map.addControl(mapPrint, 'top-right')
mapPrint.on('success',function (res) {
console.log(res)
})
</script>
</body>
</html>