高德地图升级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唰 ...

高德地图升级v2.0踩坑日记

高德地图升级v2.0踩坑日记相关推荐

最新文章

热门文章