高德地图jsApi的图例图例是我们在实现可视化过程中的重要组成部分，可以更加直观的突出我们图形中的各类信息，图例包括点、

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

图例是我们在实现可视化过程中的重要组成部分，可以更加直观的突出我们图形中的各类信息，图例包括点、线、块等各种图例，高德贴图中除了给我们提供了图例这个选项，我们也可以通过信息窗体实现图例，但信息窗体缺陷较大~

这一篇是本系列第五篇，前四篇大家可以点击链接访问
高德地图jsApi的使用
 高德地图jsApi的点和线配置
 高德地图jsApi的右键设置
 高德地图jsApi的点位新增
完成代码请查看代码仓库

信息窗体

首先了解一下信息窗体是什么？如图所示，其实就是在我们的地图以上的一个信息展示图层，而这个图层可以展示我们的点位信息，我们可以拓展其功能，其展示点位信息的话，可以通过点击事件来弹出窗体，大家也可以看到，其中包含了关闭的事件，那么我们也可以直接在最开始的时候打开窗体。
如果想要使用信息窗体来实现，弊端就是窗体会随着地图的缩放和位移进行变化，因为他是用坐标系来进行定位的，这种我们可以通过禁用缩放和移动来实现，但是禁用这种并不适合所有场景~
比如我们想要实现这样一个窗体：
代码上的实现，我只处理一种了，其实就是插入了 HTML 字符串，样式可以自己搞得。

// css 样式
.content{
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1px;
  color: white;
  display: flex;
  align-items: center;
}
.content span{
  display: block;
  width: 20px;
  height: 20px;
  background-color: #3366bb;
  margin: 0 10px;
}
.content p{
  margin-right: 10px;
}

// 通过信息窗体 实现 图例
const content = `<div class="content"><span></span><p>区域管道</p></div>`
// 创建 infoWindow 实例
const infoWindow = new AMap.InfoWindow({
isCustom:true ,// 使用自定义窗体
content,
offset: new AMap.Pixel(0,0)
})
// 在指定位置打开已创建的信息窗体
let position = new AMap.LngLat(126, 25);
infoWindow.open(map, position);

最终实现的效果如下：

没有截取全图，全图审核不通过，右下角就是一个简单的图例了，这种的话相对于我们下面使用的 lengend 他不需要再去加载一个 Loca 的资源, 同时也省去了一步实例化的配置，更加简单一些吧，但是弊端就像上面说的，会随着地图互动，不想动的话只能使用下面的代码了，但是要根据自己的业务实际情况来判定使用哪种哦~

// 地图是否可拖拽和缩放 , 使用 map 配置
map.setStatus({
dragEnable:false, // 是否可拖拽 
zoomEnable:false  // 是否可缩放
})

图例

高德地图的图例需要使用 loca 的包，主要是通过灵活的配置，可以快速制作出如散点、轨迹、区面、热力图等地理位置相关的可视化作品。文档链接

这里需要注意一下版本，1.2.0 比较老了，官方很多 demo 都是 2.0.0 了

可惜的是在官网搜索 Lenged 没有其详细 API 的介绍，这里也是找了半天才找到，图例api，这个图例能够固定定位，我们地图的缩放和位移不会影响其位置的变化，下面看一下呈现：这个图例可以增加多个，只需要通过实例化时候的位置灵活配置就可以~地图我给方法了，以免出现点位信息不让传，下面咱们食用代码：

var loca = new Loca.Container({
  map,
});
window._loca = loca;
  
// 图例, 图例可以实例化多个，使用定位来设置位置
var lengend = new Loca.Legend({
    loca: loca,
    title: {
      label: '管道类型',
      fontColor: 'rgba(255,255,255,1)',
      fontSize: '16px'
    },
    style: {
      backgroundColor: 'rgba(255,255,255,0.2)',
      left: '20px',
      bottom: '40px',
      fontSize: '12px'
    },
    dataMap: [
      { label: '省级管道', color: headColors[1] },
      { label: '县级管道', color: headColors[0] },
    ],
});
var lengend2 = new Loca.Legend({
    loca: loca,
    title: {
      label: '管道类型',
      fontColor: 'rgba(255,255,255,1)',
      fontSize: '16px'
    },
    style: {
      backgroundColor: 'rgba(255,255,255,0.2)',
      left: '160px',
      bottom: '40px',
      fontSize: '12px'
    },
    dataMap: [
      { label: '省级管道', color: headColors[1] },
      { label: '县级管道', color: headColors[0] },
    ],
});

可以看到上面的图例都是纵向的，那么我最开的需求有的是要横向排列的怎么办？我们添加上的图例是一个真是的 DOM ，不是 canvas，所以我们其实可以通过操作 DOM的方式来实现：

//修改图例排列方式
document.getElementsByClassName("amap-loca loca-controls")[0].setAttribute('id', 'testid')
var lis = document.querySelectorAll("#testid li");
for (var i = 0; i < lis.length; i++) {
  console.log(lis[i]);
  lis[i].setAttribute("class", 'test'
  );
}

我们上面打印的 li 实际上就是图中红框的每一个图例，他长这样子的：可以看到我给他加了一个类名，这样我们就可以随意操作啦~，样式，长度都可以控制了

.test{
  height: 30px;
  box-sizing: content-box;
  padding: 2px 10px;
  line-height: 30px;
  display: inline;
  float: left;
}
.test span{
  width: 100px !important;
  margin-left: 10px;
}

因为渲染的时候，lenged 使用的是行内样式，所以我们需要加上 !important。