Question

我正在通过密切关注他们的choropleth example制作我的第一张MapBox GL地图。在我的数据中，我有一个多边形和一些点，我希望有一个具有不同形状（线和点）和颜色的图例。我被颜色部分困住，因为多边形颜色由“线颜色”给出，而点是“圆形颜色”。您知道如何在下面的代码中添加这种区别吗？

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

谢谢，雅各布

Answer 1

您需要查询图层的类型：

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中为点和多边形创建图例

1 个答案: