Question

我已经在Mapbox Studio中创建了一个自定义地图，其中有一个tileset来创建一个等时区地图，然后我导出地图，使用Mapbox GL JS扩展地图。

我已经按照教程创建了一个图例，在使用Javascipt.j时效果很好：https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-legend/

我需要使用Mapbox GL JS，因为我还使用自定义CSS创建了弹出窗口，它非常好用。

＆＃34; map.legendControl.addLegend（的document.getElementById（＆＃39;说明＆＃39）的innerHTML。）;＆＃34;导致地图不显示弹出窗口。

由于Mapbox网站上没有任何文档，因此有人可以帮助您在Mapbox中获取自定义图例以使用Mapbox GL JS。

<!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>

Answer 1

您链接的示例适用于Mapbox.js，与Mapbox GL JS不同。

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

Answer 2

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

使用 map.getStyle（）。layers 获取所有图层的数组，然后可以查找您感兴趣的图层。在该层的阵列内，您将找到一个paint属性，其中包含所有化妆品信息，例如基于缩放的着色，圆半径，挤出高度等。您可以将该涂料信息保存在其他阵列中，并根据需要使用。

如果您正在寻找完整的演练，请查看here

Mapbox GL JS创建自定义图例

2 个答案: