<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<title>openlayers地图截图</title>
</head>
<body>
<div ></div>
<button >打印</button>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [ 91.1, 30.41],
zoom: 4
})
})
function toImg() {
map.once('postcompose', function (event) {
var canvas = event.context.canvas
canvas.toBlob(function (blob) {
saveAs(blob, 'map2.png')
})
})
map.renderSync()
}
</script>
<style>
#map{
width: 60%;
height: 50%;
}
</style>
</body>
</html>
相关文章:
- OpenLayers加载QQ地图(转) 2023-11-08
- openlayers中巧用canvas滤镜,自由切换你的地图风格[转] 2023-11-08
- Html2Canvas截取地图截图 2023-11-08
- 使用html2canvas 进行leaflet地图截图 2023-11-08
- openlayers 框选(画图)得到在选框内的要素,并标注出这些要素的名称 Demo (可直接运行) 2023-11-08
- 运行高德地图定位与地图实例Demo 2023-11-08
- 【Android】【项目截图】Demo截图 2023-11-08
- openlayers开发离线地图 2023-11-08