Mapbox GL JS 创建自定义图例

Question

Mapbox GL JS 创建自定义图例

tas*_*amt 4 javascript gis legend mapbox choropleth

我在 Mapbox Studio 中使用图块集创建了一个自定义地图来创建分区统计图，然后导出该地图，以使用 Mapbox GL JS 扩展地图。

我已按照创建图例的教程进行操作，该教程在使用 Javascipt.j 时效果很好： https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-legend/

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

“map.legendControl.addLegend(document.getElementById('legend').innerHTML);” 导致地图不显示弹出窗口。

请有人提供帮助，让 Mapbox 中的自定义图例能够使用 Mapbox GL JS 工作，因为 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

And*_*vey 5

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

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

归档时间：	7 年，9 月前
查看次数：	12858 次
最近记录：	6 年，7 月前