0

リーフレット マップがあり、新しいタイルが読み込まれるたびにサーバーから動的に情報を読み込んでオーバーレイを作成しようとしています。

これをテストするために、最初に試みたのは、onTileLoad イベントで、読み込まれたタイルと同じサイズの透明な四角形を作成することでした。読み込まれた URL からタイル X/Y を取り出し、次のページのコードを使用してこれを行っています: http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Derivation_of_tile_namesを緯度/経度に変換します。

奇妙なことに、ポリゴンを正しい位置に表示することができた唯一の方法は、次のコードを使用することです。

function onTileLoad(e) {
    var tile=e.url.split("/");
    var z=tile[tile.length-3];
    var x=tile[tile.length-2];
    var y=tile[tile.length-1].split(".")[0];
    //console.log("x:"+x+"y"+y+"z"+z);

    var southWest = new L.LatLng(tile2lat(y, z), tile2long(x-(-1.0), z)), 
        northEast = new L.LatLng(tile2lat(y-(-1.0), z), tile2long(x, z)),
        bounds = new L.LatLngBounds(southWest, northEast);


    //console.log("southwest: "+southWest+" northEast: "+northEast);

    L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

北東の角が y-(-1.0) によって作成されていることがわかります。

代わりに (y+1.0) を作成すると、同じものになるはずですが、四角形が間違った座標に読み込まれ、既に読み込まれたタイルが重なってしまいます。

だから私の質問は：

1) y - (-1.0) が (y+1.0) と同じでないのはなぜですか? 2) 新しくロードされたタイルの境界を取得するより良い方法はありますか?

ありがとう！

4

1 に答える 1