8

Googleマップのapiv3では、さまざまな機能の色の設定など、「スタイル」をマップに適用できます。ただし、使用するカラー形式はHSL（またはそのように見えるもの）です。

  • 色相（RGB 16進文字列）
  • 明度（-100から100の間の浮動小数点値）
  • 飽和（-100から100の間の浮動小数点値）

（ドキュメントから）

RGBからHSLへのコンバーターをオンラインで見つけることができましたが、Googleマップが受け入れる方法で変換された値を指定する方法がわかりません。たとえば、コンバーターによって与えられる典型的なHSL値は次のようになります。209° 72% 49%

そのHSL値は、Google Maps APIから指定したパラメーターにどのようにマッピングされますか？つまり、色相度の値はRGBの16進文字列にどのようにマッピングされ、パーセンテージは-100から100までの浮動小数点値にどのようにマッピングされますか？

変換の方法がまだわかりません。RGB値を指定して、色が同じになるように、Googleマップが期待するものにすばやく変換する必要があります...

4

4 に答える 4

7

色相引数は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）に設定されたボディと、上記のように計算された値（ '0x2800E2'、100、-11）を使用したスタイル付き道路ジオメトリのGoogleマップを示すスクリーンショットです。

グーグルがあなたのスタイリングを使用して、与えられた色を中心に約6つの異なる色を作成し、アウトラインが入力に最も近いことは明らかです。私はこれが可能な限り近いと信じています。

代替テキスト

実験から：http：//gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

水の場合、gmapsは0.5のガンマを減算します。希望する正確な色を取得するには、上記の計算を使用して、その.5ガンマを追加し直します。

お気に入り：

{
  featureType: "water",
  elementType: "geometry",
  stylers: [
    { hue: "#2800e2" },
    { saturation: 100 },
    { lightness: -11 },
    { gamma: 0.5 },
  ]
}
于 2010-08-24T19:22:21.077 に答える
4

私たちはあなたがまさに望んでいるツールをコーディングしました。16進数のRGB値を取り、必要なHSLコードを生成します。プレビューとGoogleMapJavaScriptAPIV3コード出力が付属しています。お楽しみください;D

http://googlemapscolorizr.stadtwerk.org/

于 2011-04-08T13:53:21.743 に答える
0

色を正確に合わせる必要がありました。そこで、@ stadt.werkが提供するツール（http://googlemapscolorizr.stadtwerk.org/）を使用して近づきました。

しかし、その後、@ bukzorによって説明された問題に遭遇しました。そこでは、Google Maps APIがシェードにバリエーションを作成しますが、どれも私が指定したものとまったく同じではないようです。

そこで、ブラウザでマップをプルアップし、2つの色合いが完全に一致していない領域のスクリーンショットを撮り、画像エディタ（私の場合はpixlr.com）で開き、カラーサッカーを使用しましたシェードの彩度と明度を取得し、Google API呼び出しで彩度や明度を1調整し、完全に一致するように見えるものが得られるまで繰り返します。

もちろん、Google Maps APIがさまざまなデバイス/ブラウザなどの色でさまざまなことを行う可能性はありますが、これまでのところ、非常に優れています。

面倒です、はい、しかしそれは機能します。

于 2011-05-18T05:22:56.147 に答える
0

リンク先のページから：

注：色相はHTMLの16進カラー値を取りますが、この値を使用して基本色（カラーホイールの周りの方向）を決定するだけで、彩度や明度はパーセンテージの変化として個別に示されます。たとえば、純粋な緑の色相は、色相プロパティ内で「＃00ff00」または「＃000100」として定義でき、両方の色相は同じになります。（HSLカラーモデルでは、両方の値が純粋な緑を指します。）「＃000000」（黒）や「#FFFFFF」（白）などの赤、緑、青の等しい部分とすべての純粋な色合いで構成されるRGB色相値灰色の— HSL座標空間での方向を示す値はないため、色相を示すものではありません。黒、白、または灰色を示すには、すべての彩度を削除し（値を-100に設定）、代わりに明度を調整する必要があります。

少なくとも私が読んだように、それはあなたがカラーホイールに基づいてあなたの角度を変換する必要があることを意味します。たとえば、0度が純粋な赤、120度が純粋な青、240度が純粋な緑であると仮定します。次に、角度を取り、その間にある2つのプライマリを把握し、補間して各プライマリのどれだけを使用するかを決定します。理論的には、おそらく2次補間を使用する必要がありますが、線形でかなりうまくいく可能性があります。

これを使用すると、（たとえば）90度は90/120 =赤から青への道の3/4なので、色相の16進数は0x00010003、または緑が0に設定された他の数値になります。赤と青の比率は1：3です。

于 2010-08-12T21:23:50.810 に答える