Googleマップオーバーレイのタイルを生成する

Googleマップに、半透明の円のオーバーレイの形で表示される情報を表示しようとしています。問題は、いくつかの円が重なっていることです。これにより、円の色が異なる場合、不透明度が増加し、色が混ざります。色々と調べてみたところ、色の混ざりを回避する方法はないという結論に至りました。

私が推奨された代替ソリューションは、サーバーでpngタイルを生成して表示するか、サーバー側で各ピクセルの色を決定し、HTML5キャンバスを使用して各ピクセルをレンダリングすることでした。私はたくさん検索しましたが、それを行う方法が見つかりませんでした。誰かが私を正しい方向に向けることができれば非常に役に立ちます。

以下の質問をより明確かつ簡潔にするために言い換えます

地図に円を表示する必要があります。これらの円の半径と色は、影響範囲と影響のタイプを表します。これらの円は半透明ですが、重なり合うと、一番上の円だけがブレンドされずに表示されます。この情報のタイルを生成するにはどうすればよいですか？

おそらく私は明確ではないので、さらに詳細を追加します。

このjsFiddle http://jsfiddle.net/Dv4UT/を確認してください。 緑（zIndex：10）と赤（zIndex：11）の2つの重なり合う円があり、不透明度は.5です。重なり合う部分は、必要に応じて赤と緑の混合です。重なり合う部分が同じ不透明度のトップカラーになるようにします。例：赤。マップオーバーレイを使用してこれが可能である場合、それは素晴らしいことです。それ以外の場合、HTML5キャンバスを使用して可能であると考えられますが、それは古いバージョンのIEでは機能しません。最後に、サーバー側でタイルを生成し、それらをオーバーレイとして使用することに頼らなければなりません。タイルを生成するという考えはありません。誰かが私を正しい方向に向けることができれば、それは非常に役立ちます。 trulia通勤マップのスクリーンショットで、下の円が上位の円で上書きされていることを確認してください。同様の種類の視覚化が必要です。

選択したプログラミング言語を使用して、オフラインで（ただし動的に）オーバーレイを作成します。少し複雑になりますが、基本的な疑似コードは次のようになります。

browser javascript send request url for overlay
acquire gis bounds for tile server side
gather all points and sort by their relevance
create image(transparent)
for each point: (least relevant first)
   draw new circle (will 'overwrite' any overlap areas)
stream image to browser
display image as overlay

エリアの大きさに応じて、ラスターをオフラインで作成し、それをmapserverまたは他の無料のマッピング配信プログラムで提供できます。独自のラスターを作成すると、希望どおりの表示が得られます。

私は次のようにします：

1. 円の不透明度を非常に低く保つ（したがって、ブレンドの問題が主流にならないようにする）
2. マウスを置いたときに、交差する円の不透明度を克服するように不透明度を変更します

このようにして、主要な色の混合による干渉なしにデータを表示し、特定の円をユーザーがその上に置いたときに強調表示することができます。