java - 添加多列图例键 Mapbox JS

Question

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

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

但是，我想知道是否可以做一个多列图例，就像mapbox中的表格一样？

谢谢!

Answer 1

图例不是 Mapbox GL 的一部分，只是绝对定位在 map 上的 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>