0

ここで少し問題があります。

私がしたいこと。

私のサーバーには、緯度、経度、タイルフィールドを持つマーカーを含むテーブルがあります。テーブルには多くのマーカーがあるため、ユーザーに表示されるタイルでそれらをリクエストします。それを正常に機能させることが私の最終目標です。

問題

独自のmapTypeを作成し、x、y がタイルの座標、z がズーム レベルである表記法getTile()を使用してサーバーから適切なタイルを要求するメソッドを定義することで、これを解決したかったのです。x/y/z詳細については、こちらを参照してください。私のコードがあります（私はここでjquery-ui-mapプラグインを使用しています）：

function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        //Data for request
        var x = coord.x;
        var y = coord.y;
        var z = zoom;

        //Here i will make an ajax request for markers in this tile

        //Visualization
        var div = ownerDocument.createElement('DIV');
        div.innerHTML = 'X:' + coord.x + ' Y:' +  coord.y + ' Z:' +  zoom;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;

      };

    }

    var test = new ServerFetchMapType();

    $('#map_canvas').gmap();
    $('#map_canvas').gmap('get', 'map').overlayMapTypes.insertAt(0, test);

すべてが機能しましたが、1つの欠点が見つかりました。それを説明します。

ここに画像の説明を入力

画像の中央にある 4 つのタイルだけが正しい 表記を持っていることがわかりますx/y/z。したがって、すべてのタイルはこのタイルの子孫です。しかし、他のタイルを使用してサーバーからデータを取得することはできません。

質問

では、マップが繰り返されている他のタイルの座標をメインのタイルと同じ座標に変更するにはどうすればよいでしょうか? または、これを解決する他の方法を提供できます。どんな助けでも大歓迎です。

4

2 に答える 2

1

ある非常に優秀な男性が、この問題を次のように解決するのを手伝ってくれました。

     function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        var dim = Math.pow(2, zoom);

        //Data for request
        var x = Math.abs( coord.x ) % dim;
        var y = Math.abs( coord.y ) % dim;
        var z = zoom;



        //Visualization D
        var div = ownerDocument.createElement('DIV');        
        div.innerHTML = 'X:' + Math.abs( coord.x ) % dim  + ' Y:' +  Math.abs( coord.y ) % dim + ' Z:' +  zoom;

        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAA9';
        return div;

      };

    }
于 2012-10-29T15:36:07.843 に答える
0

スクリーン ショットのすべてのタイルには、中央の 4 だけでなく、正しい番号が付けられています。

マーカー テーブルに「タイル」フィールドを含めるべきではなく、緯度と経度のみを含める必要があります。サーバー側のスクリプトでは、問題のタイルの角を計算し、次のような範囲内にあるマーカーを選択します。

Select * from markersTable 
where lat >= tile_SW_Lat and lat <= tile_NE_Lat 
and lon >= tile_SW_lon and lon <= tile_NE_lon

いずれの場合も、 tile(x,y) の値が 0 または正の整数であることがわかっています。API がラッピングを処理します。

于 2012-10-29T15:28:11.363 に答える