我在 Mapbox Studio 中使用 tileset 创建了一个自定义 map 来创建等值线图，然后我导出了 map ，以使用 Mapbox GL JS 扩展 map 。
我已经按照创建图例的教程进行操作，在使用 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);"导致 map 不显示弹出窗口。
请有人提供帮助，让 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>
最佳答案
您链接到的示例是针对 Mapbox.js 的，它与 Mapbox GL JS 不同。
https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/是使用 Mapbox GL JS 制作基本图例的示例。
关于javascript - Mapbox GL JS 创建自定义图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49949630/