javascript - 指定返回的 getPaintProperty 方法 Mapbox gl

Question

我想返回图层的填充颜色，以便它可以用作变量来填充可打印地图上的动态图例，该地图正在构建为单独的文档。

浏览器只会选择十六进制颜色，但getPaintProperty返回 hsl。我知道 Mapbox 根据样式/图层保存这些信息，我只是不知道如何访问它。

有没有办法返回图层填充颜色的十六进制值？

这是我用来访问每个图层填充颜色的通用代码；

    map.on("render", function() {
    if(map.loaded()) {
    console.log(map.getPaintProperty('layer id','fill-color'));
    }
    });

我目前的替代方法是使用额外的库来执行转换。

Answer 1

您可以只使用通用 rgba 到 hex 函数：

 //Function to convert hex format to a rgb color
function rgb2hex(rgb){
     rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
     return (rgb && rgb.length === 4) ? "#" +
         ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
         ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
         ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
 }

rgb2hex(map.getPaintProperty('park', 'fill-color'));

returns "#e6ebcc"