当前位置: 首页 > web >正文

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

问题描述:

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

解决办法:

出现这种现象的原因有很多,服务器带宽太低,或者是网速不好加载不完全,由于官方没有提供瓦片加载完成的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);});},

http://www.xdnf.cn/news/3090.html

相关文章:

  • 数据中心电能质量问题解决方案及经典案例
  • 人工智能在医疗行业的应用和发展前景
  • 首版次误区有哪些?与软件测试报告又有什么联系?
  • C++中一些关于何时何处定义类或函数的问题
  • MyBatis、MyBatis-Plus、Hibernate、Spring Data JPA 等 Java 持久层技术的理解和对比
  • C++每日训练 Day 18:构建响应式表单与数据验证(初学者友好)
  • 局域网视频会议软件BeeWorks Meet
  • PocketFlow一个最小的Agent框架
  • ant design pro 项目发布遇到登录页访问404
  • SVMSPro平台获取HTTP-FLV规则
  • 折叠机处理流程
  • 策略梯度(policy gradient)直观理解
  • 文献分享:2023年美国FDA批准的治疗性抗体结构和功能
  • (01)Redis 的订阅发布Pub/Sub
  • 探索语音增强中的多尺度时间频率卷积网络(TFCM):代码解析与概念介绍
  • 【运维心得】银行运维交接的坑
  • 制作一款打飞机游戏33:碰撞体编辑
  • ollama运行qwen3
  • 【Leetcode 每日一题】2962. 统计最大元素出现至少 K 次的子数组
  • 如何对多维样本进行KS检验
  • UNIAPP项目记录
  • 【大厂实战】API网关进化史:从统一入口到智能AB分流,如何构建灰度无感知系统?
  • 【工具变量】上市公司30w+过度负债数据集(2004-2023年)
  • 【嘉立创EDA】如何无限制挖槽,快捷设计挖槽
  • Linux系统配置JDK
  • 哈工大《工程伦理》复习文档
  • 存储过程补充——定义条件、处理程序及游标使用
  • PID速度、电流、位置闭环
  • swagger2升级至openapi3的利器--swagger2openapi
  • Linux 用户管理