Google maps api v3允许将“样式”应用于地图,包括设置各种功能的颜色。但是,它使用的颜色格式是HSL(或看起来像它):
(来自docs)
我设法在线找到RGB到HSL转换器,但我不确定如何以谷歌地图将接受的方式指定转换后的值。例如,转换器给出的典型HSL值为:209° 72% 49%
该HSL值如何映射到我从google maps api指定的参数?即,色调度值如何映射到RGB十六进制字符串?百分比如何映射到-100和100之间的浮点值?
我仍然不确定如何进行转换。我需要,给定RGB值,快速将其转换为谷歌地图所期望的颜色将是相同的......
答案 0 :(得分:7)
由于hue参数需要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)
很明显,谷歌使用你的造型来创建以给定颜色为中心的六种不同颜色,轮廓最接近输入。我相信这是最接近的。
从实验开始:http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
对于水,gmaps减去0.5的伽玛。要获得所需的确切颜色,请使用上面的计算,然后再添加.5 gamma。
像:
{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: "#2800e2" },
{ saturation: 100 },
{ lightness: -11 },
{ gamma: 0.5 },
]
}
答案 1 :(得分:4)
我们编写了一个确实想要你想要的工具。它采用十六进制RGB值并生成所需的HSL代码。它附带预览和Google Map JavaScript API V3代码输出。享受; D
答案 2 :(得分:0)
从链接页面:
注意:虽然hue采用HTML十六进制颜色值,但它仅使用此值来确定基本颜色(围绕色轮的方向),而不是其饱和度或亮度,它们分别以百分比变化表示。例如,纯绿色的色调可以在色调属性中定义为“#00ff00”或“#000100”,并且两个色调将是相同的。 (两个值都指向HSL颜色模型中的纯绿色。)RGB色调值由红色,绿色和蓝色等部分组成 - 例如“#000000”(黑色)和“#FFFFFF”(白色)以及所有纯色调灰色 - 不表示任何色调,因为这些值都不表示HSL坐标空间中的方向。要指示黑色,白色或灰色,您必须删除所有饱和度(将值设置为-100)并改为调整亮度。
至少在我阅读时,这意味着您需要根据色轮转换角度。例如,假设0度是纯红色,120度是纯蓝色,240度是纯绿色。然后你可以采取你的角度,找出它之间的两个原色,并进行插值以确定每个主要使用多少。从理论上讲,你应该使用二次插值 - 但是很可能你可以很好地得到线性插值。
使用它,90度(例如)是从红色到蓝色的90/120 = 3/4 ths ,所以你的色调的十六进制数将是0x00010003 - 或任何绿色设置为0的其他数字,红色和蓝色之间的比例为1:3。
答案 3 :(得分:0)
我需要准确匹配颜色。所以我使用@ stadt.werk提供的工具(http://googlemapscolorizr.stadtwerk.org/)来结束。
但后来我遇到了@bukzor解释的问题,其中Google Maps API在你的阴影上创建了变化,其中没有一个看起来正是我指定的。
所以我在浏览器中拉出地图,截取了两个不太匹配的区域的截图,在图像编辑器中打开它(pixlr.com,在我的情况下),使用了使用颜色吸盘工具来获得阴影的饱和度和亮度,将Google API调用中的饱和度和/或亮度调整为1,然后重复,直到我得到一些看似完美匹配的东西。
当然,Google Maps API可以使用不同设备/浏览器等的颜色做不同的事情,但到目前为止,还不错。
乏味,是的,但它确实有效。