Mapbox GL JS 创建自定义图例

Question

Mapbox GL JS 创建自定义图例

4

我已经在Mapbox Studio中创建了一个自定义地图，使用瓦片集创建了一张等值线地图。之后，我将地图导出，使用Mapbox GL JS扩展地图。

我按照创建图例的教程操作，当使用Javascript时，这个教程可以正常工作：https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-legend/ 我需要使用Mapbox GL JS，因为我也创建了具有自定义CSS的弹出窗口，这些弹出窗口非常好用。

"map.legendControl.addLegend(document.getElementById('legend').innerHTML);"导致地图无法显示弹出窗口。

请问是否有人能够提供帮助，在使用Mapbox GL JS时让自定义图例在Mapbox上正常工作，因为Mapbox网站上没有相关文档。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Show polygon information on click</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />

<style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>

<body>

<style>
.legend label,
.legend span {
  display:block;
  float:left;
  height:15px;
  width:20%;
  text-align:center;
  font-size:9px;
  color:#808080;
   }
</style>


 <div id='legend'  style='display:none;'>
 <strong>Indices of Multiple Deprivation (IMD) Score </strong>
  <nav class='legend clearfix'>
    <span style='background:#FED976;'></span>
    <span style='background:#FD8D3C;'></span>
    <span style='background:#FC4E2A;'></span>
    <span style='background:#E31A1C;'></span>
    <span style='background:#BD0026;'></span>
    <label>0-19</label>
    <label>20-34</label>
    <label>35-49</label>
    <label>50-64</label>
    <label>65-82</label>
    <small>Source: <a href="https://data.cdrc.ac.uk/dataset/cdrc-english-indices-of-deprivation-2015-geodata-pack-liverpool-e08000012">Consumer Data Research Centre</a></small>
 </div>

<div id='map'></div>
<script>

mapboxgl.accessToken = 'pk.eyJ1IjoidGFzdGF0aGFtMSIsImEiOiJjamZ1ejY2bmYxNHZnMnhxbjEydW9sM29hIn0.w9ndNH49d91aeyvxSjKQqg';

  var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/tastatham1/cjg3vyld813id2spdnhy4sf9u',
     center: [-2.981979, 53.406315],
     zoom: 11,
     minZoom: 11,
    maxZoom: 15,
 });

   map.legendControl.addLegend(document.getElementById('legend').innerHTML);


</script>

</body>
</html>

- tastathamt

2个回答

2

在Mapbox GL JS中，没有预定义的方法来动态获取图例，但您可以使用以下方法：

使用map.getStyle().layers获取所有图层的数组，然后您可以查找您感兴趣的图层。在该图层的数组内部，您将找到一个绘制属性，其中包含所有美观信息，例如基于缩放的着色、圆形半径、挤出高度等。您可以将该绘制信息保存在其他数组中，并根据需要使用它。

如果您正在寻找完整的步骤，请查看此处

“Original Answer”翻译成“最初的回答”

- krishna lodha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AndrewHarvey · Accepted Answer

你提供的示例是针对Mapbox.js的，而不是Mapbox GL JS。

https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/是使用Mapbox GL JS创建基本图例的示例。