添加多列图例键 Mapbox JS

Question

如何创建同时具有文本和颜色键的多列图例键？

我能够使用此示例添加带有颜色键的单列图例：https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/

但是，我想知道是否可以做一个多列图例，比如 mapbox 中的 table？

谢谢！

Answer 1

图例不是 Mapbox GL 的一部分，只是一个绝对位于地图上的 HTML/CSS 元素。因此，如果您需要 2D 图例，只需将其替换为 <table> 元素即可：

<table style="position: absolute; bottom: 30px; right: 10px; z-index:1, backgroung-color: white">
  <tr>
    <th></th>
    <th>Column 1</th>
    <th>Column 2</th> 
  </tr>
  <tr>
    <th>Row 1</th>
    <td>(1, 1) value </td>
    <td>(1, 2) value</td> 
  </tr>
  <tr>
    <th>Row 2</th>
    <td>(2, 1) value</td>
    <td>(2, 2) value</td> 
  </tr>
</table>

添加多列图例键 Mapbox JS

Add a multi-column legend key Mapbox JS

java

legend

mapbox

mapbox-gl-js