5

車に取り付けられた GPS デバイスを介して収集されたデータがあります。したがって、私が持っているデータは基本的に通り/道路の上/周りにあります。すべての座標には何らかの値があります。データのフォーマットはこんな感じです。

lat         | long        | value
---------------------------------
12.979155   | 77.644925   | 6 
---------------------------------
12.97916833 | 77.64493667 | 2
---------------------------------
12.97917167 | 77.64492167 | 8

ここでの私の仕事は、これらの緯度経度を Google マップにプロットすることです。10 個、100 個、または 1000 個のマーカーを配置することについて話すと、非常に簡単な作業のように思えます。しかし、上で述べたように、私たちはドライブでデータを収集しており、2 つの緯度経度または 2 つのポイント間の距離は数フィート (たとえば 2 ～ 3 フィート) になります。

したがって、調査の最後には、都市のごく一部で緯度経度が 90 ～ 100k になり、都市全体では 100 万になる可能性があります。

9-10k マーカーを追加しようとしましたが、正常に動作しましたが、40k、50k、60k をロードしようとするとブラウザが非常に遅くなり、これが最後に表示されるエラー メッセージです。

Uncaught RangeError: Maximum call stack size exceeded      main.js:1

私はそれについて多くのことをグーグルで調べてきましたが、私が少し知っているテクノロジー（asp.net）を使用して100万のマーカーを配置するように導く例やチュートリアルを見つけることができません. この例を見つけましたhttp://www.scribblemaps.com/markerComplex/ ジョナサン・ワグナーによるものですが、私はそれを理解して、このような既存のコードに実装することができません。

//MSSQL サーバーから緯度経度を取得します。

function PushValues(ParameterID) {
         a = ParameterID.slice(5);
    var CityID = $('#ddlCity').val().split('|');
    $.ajax({
        type: "POST",
        url: "index.aspx/PushLatLong",
        data: "{CityID:'" + CityID[0] + "',OperatorID:'" + $('#ddlOperator').val() + "',ParameterID:'" + ParameterID.slice(4) + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        cache: false,
        success: function (response) {
            GooglePlaces = response.d.split('#');
            if (GooglePlaces != "Blank") {
                HasValues = 1;
            } else {
                HasValues = 0;
            }

        },
        Error: function (r) {

        }
    });
}

// Google マップに値を配置します。

function PlaceValues() {
    var options = { zoom: 3, center: new google.maps.LatLng(37.09, -95.71), mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < GooglePlaces.length; i = i + 2) {
        ltlg = new google.maps.LatLng(GooglePlaces[i], GooglePlaces[i + 1]);
        var marker = new google.maps.Marker({
            position: ltlg,
            map: map,
            title: 'Place number',
            icon: "img/GoogleIcons/" + legendfirstvalue[1]
        });
        bounds.extend(ltlg);
    }
    map.fitBounds(bounds)
    $('#DivLoadImage').hide();
}

ここでもう 1 つ言及したいのは、マーカーの色は緯度と経度の値に依存するということです。だから私は複数のカラーマーカーを持っています。マーカーを簡単にクラスター化することはできましたが、その領域にズームインするまでマーカーの色を見ることができません。したがって、clustring を使用する方法はありません。

私のコードには何百万ものエラーがあると確信しています。必要に応じて、アプローチを変更します。 これがアプリケーションのデモです。

4

2 に答える 2

1

（クラスタリングなしで）取得できる最も近い方法は、フュージョンテーブルを使用してデータを格納し、そこからデータを取得することです。これは、おそらく例ですでに使用しているものと似ています。フラッシュなので、通常のAPIよりもはるかに高速にレンダリングできます。

Fusionテーブル自体は、サーバー側でマーカーをタイルにレンダリングし、それらを取得します。

Google Maps APIを使用すると、FusionTablesLayerオブジェクトを使用して、GoogleFusionTablesに含まれるデータを地図上のレイヤーとしてレンダリングできます。

このリンクの例。

フュージョンテーブルと一緒に、ビューポートベースのレンダリングのようなものを実行します。これは、基本的にビューポートに表示されるマーカーのみを描画することを意味します。実際には「クラスタリング手法」ではありませんが、レンダリングの速度を検討する場合に非常に役立ちます。それらの詳細については、Googleドキュメント（fusiontables）とビューポートマーカーの管理をご覧ください。同じページには、 FusiontablesAPIとチュートリアルへのより詳細なリンクも含まれています。

最終的にサーバー側でクラスタリングすることを決定した場合（簡単な作業ではないことを覚悟してください）、そうする場合は、グリッドベースのクラスタリングと同様の何かを実装します。（同じページで説明されています-良いリンクを酷評しますか？）

また、次の点にも注意してください。

テーブルの最初の100,000行のデータのみがマップされるか、クエリ結果に含まれます。

詳細については、こちらをご覧ください。

乾杯。

于 2013-03-14T17:10:27.043 に答える
0

フュージョン テーブルは、大規模なデータを処理するための方法です。これらのテーブルは、GmapGIS を使用して表示および分析できます。

于 2013-10-11T10:53:49.800 に答える