高德地图升级v2.0踩坑日记
事情是这样的，有一天产品找到我说我们系统的地图绘制板块的时候有些卡，是否可以优化一下。
于是我持怀疑态度去系统查看，大部分的地图操作都很流畅，莫非产品在耍我？？？
直到我点开了一个导入的板块数据（如下图），厚礼蟹！板块的电子围栏创建 Polygon 编辑器 的同时生成了几千个可操作点，而这些可操作的点，就是影响地图流畅度和渲染速度的罪魁祸首！
然鹅我们的代码全都是按照官方文档去实现的，为何性能如此之差？真相只有一个，就是我们的地图版本过于陈旧了。在阅读了 高德地图 v2.0 的版本介绍 后，安抚好产品小伙伴的情绪 并提出了地图优化升级的方案！
第 4 代 Web 地图渲染引擎
伴随开发者要求的不断提高，以及我们对质量与技术的无尽追求，地图 JSAPI 持续进行着技术革新与升级换代，前后经历了 4 代地图渲染引擎：
- 第 1 代 Web 地图渲染引擎以栅格瓦片拼接为主要的地图绘图手段；
- 第 2 代 Web 地图渲染引擎引入 Canvas 2D 绘图，实现了矢量地图绘制；
- 第 3 代 Web 地图渲染引擎初步引入 WebGL 渲染，实现了部分图层的3D渲染，并使渲染效率得到提升；
- 第 4 代 Web 地图渲染引擎——地图JSAPI 2.0 Beta，广泛采用各种前沿技术，不论是交互体验、视觉体验，还是接口能力都有大幅提升。
交互体验提升
地图 JSAPI 2.0 是我们基于 WebGL 渲染技术打造的高德第四代 WEB 地图渲染引擎，所有图层与地图要素均使用 WebGL 绘制，充分利用 GPU 运算。除此之外，我们从世界模型构建、矢量数据请求、数据加载传输、前端数据处理、地理要素构建、图形绘制显示、实时事件交互、惯性缓动效果等各个节点进行了深度的技术、逻辑与算法优化，使得地图的交互体验更加平顺自然。
视觉体验升级
为了图面信息传递更加高效，我们对 2000+ 种类的地图要素进行了系统化的层次和优先级精细梳理；同时我们对包括图标、文字、道路、路名、区域面、楼块等全部地图元素的视觉样式进行了优化升级，一定会让您一目了然。
功能强化升级
为了让开发体验更便捷，接口功能更加贴近现实需求，新版本突破了旧版本的部分功能设定或性能局限，如：
- 地图缩放等级 (zoom) 放开至[2, 20]，大到全球七大洲，小到街道或室内，满足更多业务场景需求；
- 老版本中 Marker 点的添加、信息窗体的打开时的异步处理过程彻底消除，再也不用为 JQuery 等选择器选查找不到对应 Dom 元素而苦恼；
- 折线 Polyline、多边形 Polygon、点标记 Marker 等覆盖物的创建效率大幅提升，实测提升 10 倍以上；
- LngLat/Pixel/Size支持二元数组形式；
- 合理化部分接口的设定。
- PolygonEditor新增吸附能力
JSAPI 2.0对所有常用覆盖物、图层的创建和绘制进行了深入的性能优化，各项性能指标均取得了大幅提升：
|
500 个 普通Marker 创建耗时 |
1.01s |
60ms |
1580% |
|
普通 Marker 流畅绘制数量上限 |
500 |
1000 |
100% |
|
文字标注 流畅绘制数量上限 |
500 |
30000 |
5400% |
|
图标标注 流畅绘制数量上限 |
3000 |
30000 |
900% |
|
5000个 Polyline/Polygon 创建耗时 |
19s |
915ms |
1970% |
|
5000个 Polyline/Polygon 绘制帧数 |
10 FPS |
30FPS |
200% |
|
30万 点聚合计算耗时 |
3.9s |
950ms |
310% |
确定下升级方案后，我 “仔细” 阅读了高德地图 v2.0 的升级指南。按照官方的说法，我们只需要把 JSAPI 引用中的版本号修改为2.0，大功告成！我成功的解决了地图卡顿的问题，与此同时我也解决掉了系统中所有的地图....
高德地图升级v2.0踩坑日记相关推荐
- 高德地图开发-常用api踩坑使用
一.高德地图的加载初始化 在这就踩过很多坑,新建项目正常显示没问题,放到我们的项目就是不显示,加载不出来, 这个时候不要慌,只要确保下面三部完成就莫问题了 1.引入高德地图开发者api <scr ...
- 高德地图自定义点标记踩坑
先看一下要做的效果 如上图所示,箭头所指示的就是我们要进行的点标记, 先说一下我做的这个步骤 1.上图所指示的坐标当时是用墨卡托坐标,要将其转成高德地图坐标表示的经纬度的形式,才能在高德地图中表示出来 ...
- 警惕参数变化，MySQL 8.0 升级避免再次踩坑
MySQL 8.0新特性专栏目录 <MySQL开发规范>过时了,视图查询性能提升了一万倍 你真的会用EXPLAIN么,SQL性能优化王者晋级之路 索引三剑客之降序索引和不可见索引 千呼万唤 ...
- Win11 + Ubuntu18.04 双系统踩坑日记
Win11 + Ubuntu18.04 双系统踩坑日记 前言 准备工作 硬件配置 镜像下载 Win11镜像下载 Ubuntu镜像下载 启动盘准备 Win11启动盘 Ubuntu启动盘 Win11安装 ...
- 全志哪吒D1-H Tina Linux Ubuntu 22.04入门踩坑日记
哪吒D1-H Tina Linux入门踩坑日记 系统环境 源码编译 mklibs-readelf的C++标准问题 m4的SIGSTKSZ问题 libfakeroot的_STAT_VER问题 read_ ...
- ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针 参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
- springboot踩坑日记—nacos: Error watching Nacos Service change
springboot踩坑日记-nacos: Error watching Nacos Service change Spring Boot :: (v2.1.5.RELEASE) 错误代码: 07-3 ...
- Antd Pro V4 protable详解（ps:踩坑日记）
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
- 转：android.support升级到androidx踩坑记录
原文链接:android.support升级到androidx踩坑记录 - 简书 年前想着Google老大之前提醒过将项目升级到androidx,所以年前一通操作猛如虎把Android Studio唰 ...
最新文章
- 解决python2.7 UnicodeEncodeError报错
- 浅谈2D游戏设计模式--游戏剧情设计（1）
- asp.net下的串口编程
- vi(vim)常用命令汇总
- 2000年一元钱牡丹图案现在值钱吗？
- Android Tips – 填坑手册
- mock gps android,MockGPS: Android application to fake GPS
- 解决方法：python下载慢，pycharm下载慢，anaconda下载慢，百度网盘链接分享给你备用
- 迈普光彩分享 几个细节教你搭建好LED显示屏舞台
- 无源贴片晶振四角引脚_有源晶振四个脚是如何定义的
- Python爆破ZIP文件(支持纯数字数字+字母密码本)
- 百度大脑车型识别使用攻略
- 机器学习算法原理与编程实践-郑捷著 读书笔记—第一章part1
- 求最小公倍数的三种方法（C语言）
- ios 编译ffmpeg 支持 x264 fdk-aac openssl 并裁剪库大小
- 计算机图片数据传输图,电脑对电脑或手机传送文件图片的工具
- CSS 实现箭头、三角形、旋转的正方体
- Android商城排版,android排版布局学习
- 服务器和普通电脑有什么区别？
- 跨平台框架这么多, 老夫无可奈何！