在MapBox GL/JavaScript中为点和多边形创建图例

问题描述：

我正在使用MapBox GL紧跟其choropleth example制作我的第一个地图。在我的数据中，我有一个多边形和一些点，我希望有一个具有不同形状（一条线和一个点）和颜色的图例。我被颜色部分卡住了，因为多边形颜色是由'线条颜色'给出的，而点是'圆形颜色'。你知道如何在下面的代码中添加这种差异吗？在MapBox GL/JavaScript中为点和多边形创建图例

map.on('load', function() { 

    // the rest of the code will go in here 
    var layers = ['torpigna', 'bar']; 

    layers.forEach(function(layer) { 

    var color = map.getPaintProperty(layer, 'circle-color'); 
    var item = document.createElement('div'); 
    var key = document.createElement('span'); 
    key.className = 'legend-key'; 
    key.style.backgroundColor = color; 

    var value = document.createElement('span'); 
    value.innerHTML = layer; 
    item.appendChild(key); 
    item.appendChild(value); 
    legend.appendChild(item); 
}); 
});

感谢，雅格布

答

你需要查询层的类型：

layers.forEach(function(layerId) { 

var layer = map.getLayer(layerid); 
if (layer.type === 'circle') { 
... layer.paint['circle-fill'] 
} else if (layer.type === 'fill') { 
... layer.paint['line-color'] 
}

你会发现这个代码有帮助的，因为它一样一样的你在做什么试图实现：https://github.com/City-of-Melbourne/Data3D/blob/master/src/js/mapVis.js

在MapBox GL/JavaScript中为点和多边形创建图例

相关推荐