3

以前、この質問を別の見出しで Stackoverflow に投稿しましたが、あまり反応がありませんでした。今回は、さらに説明を加えて再度投稿します。

V3 js API を使用して Google マップを実装しました。マップ内に約 500 の郵便番号ポリゴンを描画しています。郵便番号ポリゴンの色付けは、正常に機能している特定の条件によって異なります。郵便番号のセットに異なる色を割り当てているように。しかし、問題は、マップを拡大すると、ポリゴンの色の一部が他のポリゴンの色と重なることです。

例: DB から 30 個の郵便番号を取得しています。これらの 30 の郵便番号を 5 つの地域に分割しています (最高の売り上げから最低の売り上げに応じて)。各領域は特定の色でマークされます。したがって、この場合、5 つの異なる色を持つように、30 のポリゴンが 5 つの領域でプロットされます。マップを拡大しても、グループ化に変化はありませんが、一部のポリゴン (3 ~ 4 の可能性があります) の色が他のポリゴンと重なっています。法線マップで 3 番目の領域の色が「黄色」の場合、マップをズームすると、領域 3 のポリゴンの一部が「赤」の色で重なります。「赤」の色は地域 1 の郵便番号ポリゴンに属します。

ここにコードがあります

{% ifequal zip.rank 1 %}
    var fillColor = '#FF0000';
{% endifequal %}
{% ifequal zip.rank 2 %}
    var fillColor = '#FF00D3';
{% endifequal %}
{% ifequal zip.rank 3 %}
    var fillColor = '#BE4BAA';
{% endifequal %}
{% ifequal zip.rank 4 %}
    var fillColor = '#BE88B5';
{% endifequal %}
{% ifequal zip.rank 5 %}
    var fillColor = '#857081';
{% endifequal %}


var path = [
                {% for polycoord in zip.zip_info.zip_polygon %}
                    new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
                {% endfor %}
            ];
var polygon = new google.maps.Polygon(
    {
        path:path, 
        clickable:true,
        strokeColor: '#000000',
        strokeOpacity: 0.75,
        strokeWeight: 1,
        fillColor: fillColor,
        fillOpacity: 1,
    }

);
polygon.setMap(map);
4

1 に答える 1

3

私は解決策を見つけました。基本的に、すべての色はサーバー側のスクリプトによってランダムに生成され、マップ テンプレートに渡されました。ランダムな色を生成するために使用されたスクリプトは、ブラウザーが理解できない 5 桁のカラー コードを与えることがありました。したがって、ポリゴン領域の一部は、近くのポリゴン領域の色を使用していました。サーバー側のスクリプトを変更して、スクリプトが 5 桁のカラー コードを生成する場合、カラー コードにランダムな数字が追加され、最終的に有効なカラー コードが作成されるようになりました。

于 2013-04-22T11:06:03.837 に答える