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

Question

我正在通过密切关注他们 choropleth example 使用 MapBox GL 制作我的第一张地图。在我的数据中，我有一个多边形和一些点，我想为它们提供不同形状（一条线和一个点）和颜色的图例。我坚持使用颜色部分，因为多边形颜色由 'line-color' 给出，而点的颜色是 'circle-color'。您知道如何在下面的代码中添加这种区分吗？

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

Create a legend in MapBox GL/JavaScript for both points and polygons

javascript

opengl-es

legend

mapbox-gl

mapbox-gl-js