openlayers 截图
OK,我承认,这篇博文是一个水文。
最新做了一个功能,就是 openlayers 展示二维 GIS 数据后,可以把当前的视角导出图片。
直接写代码吧,没啥好说的:
// 截图toImg() {if (this.map) {let canvas = this.map.getViewport().querySelector('canvas');let dataURL = canvas.toDataURL('image/png');let link = document.createElement('a');link.href = dataURL;link.download = 'openlayers.png';link.click();}},
这样就可以了,但是也许会报错,报错原因一般都是使用的底图图层存在跨域问题。所以说在加载底图的时候,设置一下允许跨域就可以了哟。
// 加载高德底图addMapLay() {let gdMapLayer = new TileLayer({source: new XYZ({crossOrigin: "anonymous",//跨域加这行代码,加上该代码即可url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',}),});this.map.addLayer(gdMapLayer);},
主要就是这行代码:crossOrigin: "anonymous"
。
好了,我知道的就这么多。结束了。
拜拜!