百度地图海量点方案趟坑记录(百度地图GL版 + MapVGL + vue3 + ts)

核心需求描述

1. 不同层级有不同的海量图标展示
2. 底层海量图标需要展示文字
3. 拖动、放大缩小都需要重新请求数据并展示
4. 固定地图中心点（拖动、放大缩小，中心点始终在地图中心）
   示例图片：（某些图片涉及公司数据，就未展示了！2024-02-20 删除)
   

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff309375caf542f3a8c177ea6c1acece.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c03b7756e0f14f48b2c74709b242f9a6.png

技术方案

• vue3 + ts
• 百度地图GL版（第一版为2d版，后因性能、用户体验等废弃）
• MapVGL

遇到的问题

1. 百度地图文档不全，某些方法需要打印实例查看
2. MapVGL 文档不全，需要的某个功能在示例中存在，而文档中没有
3. 缩放时中心点会偏移
4. mapvgl 图标，在地图中消失，但点击所在位置还能响应相关事件
5. 重复绘制次数太多，且图片会闪动，（也是内存溢出的原因之一）
6. 内存溢出（原因之一：热力图层）

解决方案

前两点无解，官方不作为，只能大家辛苦点，自己多方面去搜寻想要的东西。

3 缩放时中心点会偏移

百度地图缩放时，是按照当前鼠标位置为缩放的基点，在移动端则为两指之间的中心点，所以在我们当前的场景下缩放时，就会产生中心点偏移的情况，解决方案逻辑：
*仅针对移动端
监听百度地图容器的 touchmove 事件替换地图自身的双指缩放，通过两点之间的距离判断放大/缩小，去设置百度地图的层级
部分逻辑代码如下：

  <XCMap ref="xcMapRef"  @touchend="ontouchend" @touchmove="ontouchMove" @touchstart="ontouchstart" ... />

c