在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); 
}); 
});

感謝，雅格布

來源

2017-03-01 Jacopo

你需要查詢層的類型：

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

來源

2017-03-02 00:34:27

在MapBox GL/JavaScript中爲點和多邊形創建圖例

回答

相關問題