高德地图api使用优化(上篇)

2,085 阅读4分钟

「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战

  1. 地图js大小大概337k(它一定要被加载,但无必要优先加载)
  2. 高德地图采用canvas绘制(可右键检查元素,可以找到canvas元素) 我们从如下几个方面来探讨高德地图的使用最佳实践:
  • 地图js源码如何加载
  • 如何管理好地图图层
  • 设置合适的地图中心点

js异步加载

地图js算是一个体积较大的包,有300多kb,网络差的情况下,这个网络消耗也是恐怖如斯也。 没关系,高德地图已经给出了异步加载的代码。在不需要地图api的时候,你可以先不加载。在空闲的时候,或者需要的时候去加载它。官方提供了两种方式:

1,异步脚本

  var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
  var jsapi = doc.createElement('script');
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  document.head.appendChild(jsapi);

2,通过官方提供的MapLoader

   AMapLoader.load({
      key: '', // 申请好的Web端开发者Key,首次调用 load 时必填
      version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI,缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca, 缺省不加载
        version: '1.3.2', // Loca 版本,缺省 1.3.2
      },
    })
      .then((AMap) => {
        var map = new AMap.Map('container');
        map.addControl(new AMap.Scale());
        new AMapUI.SimpleMarker({
          map: map,
          position: map.getCenter(),
        });
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });

官方推荐使用第二种,第二种方式是优雅的,为何优雅。

  1. 代码结构更清晰,地图版本,需要加载的插件,以及更多的特性一目了然。
  2. 它提供了一个统一的接口,AMapLoader.load方法。避免异步加载js的混乱写法。
  3. 通过封装加载地图js过程,我们在不改变最上层应用代码的前提下,可以不断优化加载速度,应用层代码是无感知的,做到了解耦合
  4. 通过中介,可以提供更多高级的功能。

图层(canvas),设置纵深关系。

图层是指能够在视觉上覆盖一定地图范围,用来描述全部或者部分现实世界区域内的地图要素的抽象概念,一幅地图通常由一个或者多个图层组成。(摘自高德地图jsapi文档)

缺省情况下,也就是初始化地图选项时不传入layers选项,高德地图会创建标准图层。

new AMap.Map('container', {layers: undefined })

1.原始的地图长下面这样:

image.png

2.去掉amap-layer图层之后长这样(amap-layer的z-index为0):

image.png 这里看到的图层是高德地图的标注图层,在标准图层之上。

我们习惯将底图上自带的标示一定信息的文字或图标称为标注,比如 POI 标注,道路名称标注等。 3.去掉amap-labels图层之后长这样(amap-labelsz-index为99):

image.png 这里看到amap-layer图层就是高德地图的标准图层,使用canvas绘制。

可以看到,高德地图的图层的纵深关系使用css属性z-index来表示。 点标记markerz-index为120。它们之间的纵深关系总结如下:amap-layer < amap-labels < amap-markers

因此,我们想要在地图上加上其他的元素,比如可拖拽小卡片,则要将卡片的z-index设置为至少大于120,这样才不会出现灵异事件。

setFitView(设置合适的地图中心点)

map.setFitView([polyline,marker1,])

这个api让地图中心自动调整到合适的位置,以便更完整地展示地图各图层上地元素,根据覆盖物范围调整视野. 它接收一个数组,通过map.add方法加入到地图上的元素都可以当作数组的元素传入,它会自动帮我们计算中心点。当然,我们可以自己去计算中心。 求求你使用它吧,它做了算法优化。 感谢阅读,尝试文中描述的技巧组合成一个类吧。如果决定对你有点启发,那么动一下你的小手,给深夜坚持写作的笔者一个赞。