高德地图线上截图瓦片地图加载不完全

问题描述：

后端在线上服务器调用前端截图地址，截到的图总是出现瓦片地图未加载完全或者是地图还没有居中的时候截到不完整的图片。如下：

解决办法：

出现这种现象的原因有很多，服务器带宽太低，或者是网速不好加载不完全，由于官方没有提供瓦片加载完成的api，所以只能尽可能的避免，首先截图改为前端来截图，截完图后调用图片上传接口发送给后端，在绘制完图层后加等待时延（3s）左右，由于每次截图后端请求都是打开一个新的浏览器，所以为了避免加载地图的时间，截图路径由原本的一次带一个参数改为一次带多个参数，前端遍历入参依次截图，这样基本能避免由于地图初始化导致的瓦片地图加载不完整的情况。不过缺点就是并没有完全避免，比如第一张就报错，或者是网速真的太差，前几张还是会出现加载不完全的情况。

关键代码：

	// 循环请求
async loopQuery() {for (let key = 0; key < this.parmasArr.length; key++) {await this.getMapPoint(this.parmasArr[key]);await this.renderFinish(this.parmasArr[key]);}},//获取地图覆盖物数据async getMapPoint(key) {let params = {key};let res = await getPoint(params);if (res.code == 200) {this.legndParams = res.threshold;let regions = [];if (res.region) {regions = res.region.map(item => {let point = GPS.gcj_encrypt(item.latitude, item.longitude);return {Longitude: point.lon,Latitude: point.lat};});} let points = [];if (res.points) {points = res.points.map(item => {let point = GPS.gcj_encrypt(item.latitude, item.longitude);return {Longitude: point.lon,Latitude: point.lat,value: item.value,CMCC: 1};});} await this.$refs.utilMap.drawPolygon(regions, "#0f89f5", 0);console.log("多边形绘制完成");await this.$refs.utilMap.drawPluginPoint([this.legndParams], points);console.log("轨迹点绘制完成");return new Promise(resolve => {resolve();});}},async renderFinish(key) {return new Promise(resolve => {setTimeout(async () => {console.log('开始截图');//发送图片给后台let file = await this.$refs.utilMap.cutCustomizeImg();// this.downloadImage(file);let form = new FormData();form.append("file", file);form.append("param", key);await saveImage(form);resolve();}, 2000);});},