题

Google Maps API V3允许将“样式”应用于地图，包括设置各种功能的颜色。但是，它使用的颜色格式是HSL（或看起来像它）：

  • 色相（RGB六角字符串）
  • 轻度（-100至100之间的浮点值）
  • 饱和度（-100至100之间的浮点值）

（来自 文档)

我设法在线找到了HSL转换器的RGB，但是我不确定如何以Google Maps接受的方式指定转换值。例如，转换器给出的典型HSL值是： 209° 72% 49%

HSL值映射如何到我从Google Maps API指定的参数？ IE色相值映射如何映射到RGB十六进制字符串，以及一个百分比映射到-100和100之间的浮点值？

我仍然不确定如何进行转换。考虑到RGB值，我需要快速将其转换为Google Maps期望的内容，以使颜色相同...

有帮助吗？

解决方案

由于色相论点期望RGB，因此您可以将原始颜色用作色调。

rgb2hsl.py:

#!/usr/bin/env python

def rgb2hsl(r, g, b):
    #Hue: the RGB string
    H = (r<<16) + (g<<8) + b
    H = "0x%06X" % H

    #convert to [0 - 1] range
    r = float(r) / 0xFF
    g = float(g) / 0xFF
    b = float(b) / 0xFF

    #http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness
    M = max(r,g,b)
    m = min(r,g,b)
    C = M - m

    #Lightness
    L = (M + m) / 2

    #Saturation (HSL)
    if L == 0:
        S = 0
    elif L <= .5:
        S = C/(2*L)
    else:
        S = C/(2 - 2*L)

    #gmaps wants values from -100 to 100
    S = int(round(S * 200 - 100))
    L = int(round(L * 200 - 100))

    return (H, S, L)


def main(r, g, b):
    r = int(r, base=16)
    g = int(g, base=16)
    b = int(b, base=16)
    print rgb2hsl(r,g,b)

if __name__ == '__main__':
    from sys import argv
    main(*argv[1:])

例子：

$ ./rgb2hsl.py F0 FF FF
('0xF0FFFF', 100, 94)

结果：

下面是一个屏幕截图，显示了主体设置为RGB背景颜色（在这种情况下为2800E2），以及带有样式道路几何形状的Google地图，使用如上所述计算的值（'0x2800E2'，100，-11）。

很明显，Google使用您的样式创建以给定颜色为中心的六种不同颜色，其中大纲最接近输入。我相信这是尽可能接近的。

alt text

从实验中进行： http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

对于水，gmaps减去伽马为.5。要获得所需的确切颜色，请使用上面的计算，然后将.5伽玛添加回。

喜欢：

{
  featureType: "water",
  elementType: "geometry",
  stylers: [
    { hue: "#2800e2" },
    { saturation: 100 },
    { lightness: -11 },
    { gamma: 0.5 },
  ]
}

其他提示

我们编码了一个确切想要您想要的工具。它需要十六进制的RGB值并生成所需的HSL代码。它带有预览和Google Map JavaScript API V3代码输出。享受; d

http://googlemapscolorizr.stadtwerk.org/

从链接页面：

注意：虽然色调采用HTML六角形颜色值，但它仅使用此值来确定基本颜色（其围绕色轮的方向），而不是其饱和度或轻度，它们随着百分比变化而单独指示。例如，纯绿色的色调可以定义为“色调属性”中的“＃00ff00”或“＃000100”，两种色调都相同。 （这两个值指向HSL颜色模型中的纯绿色。）RGB色调值由相等的红色，绿色和蓝色组成 - 例如“＃000000”（黑色）和“ #ffffff”（白色）和所有纯阴影灰色 - 不要指示任何色调，因为这些值都没有表示HSL坐标空间中的方向。要指示黑色，白色或灰色，您必须删除所有饱和度（将值设置为-100），然后调整轻度。

至少在我阅读时，这意味着您需要根据色轮转换角度。例如，让我们假设0度是纯红色，120度为纯蓝色，240度为纯绿色。然后，您将角度拿出角度，找出其属于哪个两个初选，并插入插入之间，以确定每位主要使用多少。从理论上讲，您可能应该使用二次插值 - 但很有可能与线性相当好。

使用它，90度（例如）为90/120 = 3/4ths 从红色到蓝色的方式，因此色相的十六进制号为0x00010003，或任何其他将绿色设置为0的数字，红色和蓝色之间的比率为1：3。

我需要准确匹配颜色。因此，我使用了 @stadt.werk提供（http://googlemapscolorizr.stadtwerk.org/）的工具。

但是后来我遇到了@bukzor解释的问题，在该问题上，Google Maps API在您的阴影上产生了变化，这似乎不是我指定的。

因此，我在浏览器中拉起了地图，拍摄了两种阴影的区域截图，这些阴影不太匹配，在图像编辑器中打开它（我的情况下是Pixlr.com），使用了颜色sucker使阴影的饱和度和亮度的工具，将Google API调用中的饱和度和/或轻度调整为1，然后重复，直到我得到看起来完美匹配的东西为止。

当然，Google Maps API可能会在不同的设备/浏览器/等上使用颜色来做不同的事情，但是到目前为止，一切都很好。

乏味，是的，但它起作用。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top