Javascript Mapbox GL JS创建自定义图例_Javascript_Gis_Mapbox_Legend_Choropleth

Javascript Mapbox GL JS创建自定义图例

javascript gis mapbox

Javascript Mapbox GL JS创建自定义图例,javascript,gis,mapbox,legend,choropleth,Javascript,Gis,Mapbox,Legend,Choropleth,我在Mapbox Studio中创建了一个自定义地图，其中包含一个平铺集来创建一个choropleth地图，然后我导出了地图，以使用Mapbox GL JS扩展地图我遵循了创建图例的教程，在使用Javascipt.j时效果很好：我需要使用Mapbox GL JS，因为我还创建了带有自定义CSS的弹出窗口，这非常好地工作 “map.legendControl.addLegend（document.getElementById（'legend'）.innerHTML）；”导致地图不显示弹出窗口

我在Mapbox Studio中创建了一个自定义地图，其中包含一个平铺集来创建一个choropleth地图，然后我导出了地图，以使用Mapbox GL JS扩展地图

我遵循了创建图例的教程，在使用Javascipt.j时效果很好：

我需要使用Mapbox GL JS，因为我还创建了带有自定义CSS的弹出窗口，这非常好地工作

“map.legendControl.addLegend（document.getElementById（'legend'）.innerHTML）；”导致地图不显示弹出窗口

由于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>


单击时显示多边形信息
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.图例标签，
.图例span{
显示：块；
浮动：左；
高度：15px；
宽度：20%；
文本对齐：居中；
字体大小：9px；
颜色：#808080；
}
多重剥夺指数（IMD）评分
0-19
20-34
35-49
50-64
65-82
资料来源：
mapboxgl.accessToken='pk.eyj1ijoidgfzdgf0agftmsisimeijjamz1ejy2bmyxnhznmhxbjeydw9sm29hin0.w9ndnh49d91aeyvxsjkqg'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/tastatham1/cjg3vyld813id2spdnhy4sf9u',
中间：[-2.981979，53.406315]，
缩放：11，
minZoom:11，
最大缩放：15，
});
map.legendControl.addLegend（document.getElementById（'legend'）.innerHTML）；

您链接到的示例是Mapbox.js，它与Mapbox GL js不同

是使用Mapbox GL JS创建基本图例的示例。

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

使用map.getStyle（）.layers获取所有层的数组，然后可以查找感兴趣的层。在该层的数组中，您将发现一个paint属性，它保存所有外观信息，例如基于缩放的颜色、圆半径、拉伸高度等。您可以将该绘制信息保存在其他阵列中，并根据需要使用它

如果您正在寻找有关此内容的完整演练，请查看

谢谢您的回复。我已经创建了您提供的示例，但这不是我想要的。我真的很喜欢HTML版本，正如我提供的在线教程中所链接的，它看起来更干净。由于Mapbox GL JS没有在线教程，您对如何重新创建有何建议。