当前位置：首页 > news >正文

OpenLayers 地图打印

news 2025/5/31 20:20:48

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图打印功能可以实现输出当前视窗范围内的地图，将图片保存到客户端。通过浏览器的截屏或者第三方插件实现地图导出功能。本节主要介绍加载地图打印。

1. 实现方式

OpenLayers 5具有Canvas和WebGL两种渲染模式，可以基于地图容器对象来实现导出图片功能，在教程中采用Canvas渲染方式，所以采用Canvas的toDataURL方法导出地图。

map.once('postcompose', evt => {const canvas = evt.context.canvasele.href = canvas.toDataURL("image/png")ele.download = "地图"ele.click()
})

2. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>地图导出</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><script src="../libs/js/mapbox-streets-v6-style.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style>
</head><body><div id="map" title="地图显示"></div><div class="load-div" onclick="exportMap()"><span>导出地图</span></div>
</body></html><script>//地图投影坐标系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地图服务参数简单介绍=============================////================================vec：矢量图层=================================////================================img：影像图层=================================////================================cva：注记图层=================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影==============////=============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地图影像注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: projection}),// 鼠标控件：鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([// 加载鼠标控件new ol.control.MousePosition()])})map.addLayer(TDTImgLayer)map.addLayer(TDTImgCvaLayer)function exportMap() {const ele = document.createElement("a")ele.style.display = "none"map.once('postcompose', evt => {const canvas = evt.context.canvasele.href = canvas.toDataURL("image/png")ele.download = "地图"ele.click()})map.renderSync()}
</script>