4

タイル オーバーレイを使用する場合、これまでに見た唯一の方法は、タイルを取得するときに Google をリッスンし、呼び出しから X、Y、Z 座標を取得し、それを一連のタイルと比較することです。

var tileOptions = {
    getTileUrl: function(coord, zoom) {
        return "/tiles/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
    }
}

その X、Y、Z のタイルが存在する場合は、それが検出され、通常どおり呼び出されます。そうでない場合は、404 エラーが発生します。私の場合、6 セットのタイルがあり、すべて同時にアクティブになる可能性があります。タイルを作成するスクリプトは、空白のタイルを無視して作成しません。つまり、マップのズームまたは位置が変わるたびに、すべてのタイルを読み込もうとすると、100 以上の 404 エラーが発生する可能性があります。

一部でこれに対抗するために、タイル検索をタイルがカバーする領域に限定しました。

var tileOptions = {
    if (zoom>=16 && zoom<=20) {
        if (zoom=16) { if (coord.x>=16000 && coord.x<=16004) { if (coord.y>=24200 && coord.y<=24203) { 
            getTileUrl: function(coord, zoom) {
                //return the tiles
            }}}
        }
        if (zoom=17) //...
        }
        if (zoom=18) //...
        }
        //...
    }
}

ただし、この領域は 8x10 ブロックの領域にまたがっており、オーバーレイによって完全にはカバーされていません。この方法は、ユーザーがマップから離れようとしたときのエラーを防ぐだけでなく、非常に複雑で、タイルの呼び出しプロセスが遅くなる可能性があります。

したがって、タイルを「呼び出す」のではなく、タイルを「配置」する方法を探しています。マップが「このタイルはありますか」と尋ねて 404 エラーの危険を冒す代わりに、スクリプトまたは関数は「私はこれらを持っています」と言うでしょう。 tiles, place them" を実行して、欠落している (空白の) タイルを無視し、理想的には、ページに表示されているタイルのみを読み込みます。

または、どのタイルが存在するかを関数に認識させて、それらのタイトルのみを呼び出そうとし、404 エラーを回避する方法も探しています。

要するに、タイルの呼び出しで 404 エラーを回避するにはどうすればよいですか?

質問を書いた後の考え: 最初の理想的な解決策は、if ステートメントのスタックを取得し、それらをタイルのより動的なチェックに変換し、タイルが存在する場合は「return」を使用して実際に呼び出すことだと思います。ただし、これでも同じ 404 エラーが発生するようですが、機能が異なります。

インデックスの使用: 以下に meetamit によって提案されているように (私が正しく理解している場合)、タイルを呼び出して 404 をチェックとして使用するのではなく、最初にタイルの存在/非存在をチェックするインデックスを作成します。しかし、「Z_X_Y.png」形式の一連のタイルを使用して、これらのインデックスを簡単に作成するにはどうすればよいでしょうか?

4

1 に答える 1

6

メソッドを実装する必要がある ImageMapType を拡張しているようですgetTileUrl()。あなたが言うように、タイルを「呼び出す」のではなく「配置する」には、オーバーレイ マップ タイプを作成する必要があります。 404 を使用して説明します。

実際には、これをどのように実装しても、画像の存在の「テスト」として 404 に依存している場合は、サーバーへの不要な接続を結び付けて、マップのパフォーマンスを大幅に低下させる可能性があります。理想的には (ご指摘のとおり)、クライアントには、利用可能なタイルを表すインデックスがいくつかあります。タイルが利用できないことをインデックスが示している場合は、getTileUrl()が返されnullます。つまり、Google Maps API がnullURL を試行およびロードしないことを認識していると仮定します。そうでない場合、このメソッドは透明な画像の URL を返すことができます。この画像は一度キャッシュされ、欠落しているタイルごとに再利用されます。

この指数をどのように表現するかは選択の問題です。これは単純な JSON である可能性があり、非常に大きくなる可能性があります (ただし、その場合でも、すべてのクライアントがそれをキャッシュするため、1 回だけ読み込まれます)。または、創造力を働かせて、インデックスを表すより簡潔な形式を考え出すこともできます。たとえば、タイルの有無を表す黒と白のピクセルを使用して、画像を事前に生成することもできます。次に、この画像を に描画し<canvas>、キャンバスから適切なピクセルを読み取って、タイルが存在するかどうかを判断します。

質問を絞り込んだ後、回答に追加する

JSON インデックスは次のようになります。

var index = {
  "4": {
    xMin: 10,
    xMax: 31,
    yMin: 4,
    yMax: 11,
    tiles: [1,1,1,0,1,0,1,1,1,0,1,0,1,0,1,1,1 ...]
  },
  "5": {
    xMin: 5,
    xMax: 16,
    yMin: 2,
    yMax: 6,
    tiles: [1,1,1,1,0,0,1,1,1,0,0,1,1 ...]
  }
}

各最上位オブジェクトはズーム レベルに対応します。このようにindex["5"].tilesして、ズーム レベル 5 のすべてのタイルが表示されます。1はタイルがあることを意味し、タイルがないことを意味します0。最小/最大値xMin, xMax, yMin, yMaxは、関心のある地域を定義するためのものです。これは、タイルが世界全体をカバーしていないことを示しているためです。

タイルが存在するかどうかを確認するには:

function tileExists(z, x, y) {
  var obj = index[String(z)],
      tilesPerRow = obj.xMax - obj.xMin,
      // Calculate the index of tile within the sequential array
      iTile = (x - obj.xMin) + ((y - obj.yMin) * tilesPerRow);

  return Boolean(obj.tiles[iTile]);
}

繰り返しになりますが、JSON を使用すると、このインデックスは非常に大きくなる可能性があります。それは、カバーしている世界の範囲とズーム レベルによって異なります。ズーム レベル 10 で、全世界をカバーすると、約 100 万個のタイルが表示されます。これは、非常に大きな配列を意味します。次に、より圧縮された形式を採用する必要があります。それをどう定義するかはあなた次第です。配列[14,2,120,1,201,3]が「14 個の 1、その後に 2 個の 0、その後に 120 個の 1、続いて 1 個のゼロなど」と解釈されるように定義できます。する意思がある/できる. これが十分に役立つことを願っています。

于 2012-06-11T19:38:48.180 に答える