AMap JS 高德地图，修改渲染图层层级

---

问题

前端使用 AMap JS 高德地图时，覆盖物绘制线条（AMap.Polyline），会覆盖住下方的路段名称，路段编号，以及地址名称等等。

当然，只要是 覆盖物 ，都会如其描述的那样，覆盖在其他图层上方，这很正常，但是想要在路段上绘制线条后能看到下方的路段名称，路段标号等信息就需要调整渲染图层的层级了。

---

官网方法

AMap JS 有 这些图层，并且提供了 只有下方五个图层支持的setzIndex 方法，分别是

TileLayer
TileLayer.Satellite
TileLayer.RoadNet
TileLayer.Traffic
AMap.LabelsLayer

且提供了一个 demo，演示如何更改层级

---

手动方法

以上官网提供的方法，无法解决上述提到的问题，通过 map.getLayers()获取的图层也只能使用 setzIndex 方法设置上述支持的图层。

通过审查元素发现，label 文本信息是在 className 为 amap-labels 这个canvas 标签（可以看做label图层）里绘制的，并且CSS样式为 z-index: 99。

而渲染 覆盖物 （AMap.Polyline）的图层是在 className 为 amap-vectors 这个canvas 标签（可以看做需要canvas绘制的覆盖物图层），并且CSS样式为 z-index: 110。

知道了这点，我们就可以通过更改CSS样式z-index使 文本信息图层可以悬浮于覆盖物图层。

注：覆盖物，意思就是覆盖在其他图层上方，这可能就是官网未提供可以修改这两个图层的方法吧。但是经测试，其他图层都可以设置大于99,110，也就是超过这两个图层。可能官网有提供方法，只是博主未找到

---

更改层级演示

通过在 使用 setzIndex 方法 这个demo里，录屏演示了一下，效果如上。

可以发现，切换基础图层，和道路图层，对应的DOM 样式z-index发生了变化。

更改 className 为 amap-labels 这个DOM 的样式 z-index 同样可以调整层级，如上图效果，路段名称，区域名称，路段编号，都处于 覆盖物 （AMap.Polyline）上方。

友情提醒一下大家，更改了样式z-index 层级，会造成所有绘制在 此 DOM上的覆盖物都会变化层级，比如添加一个圆形覆盖物

文字也会在圆形覆盖物上方。

---

最后

以上信息如有疏漏或错误，欢迎指正，谢谢。