0

簡単なチラシの例を作りました。それぞれに位置とズームが表示された手続き型タイルをレンダリングします。射影と CRS は、ズーム = 20 で変換せずに、lat と lng を x と y に直接マッピングするように構成されています。これは、マップをクリックして座標付きのポップアップを表示することで簡単に確認できます。

var naturalZoom = 20;

L.Projection.Direct = {
    project: function (latlng) {
        return new L.Point(latlng.lat, -latlng.lng);
    },

    unproject: function (point) {
        return new L.LatLng(point.x, -point.y);
    }
};

L.CRS.Wall = L.extend({}, L.CRS, {
    projection: L.Projection.Direct,
    transformation: new L.Transformation(1, 0, -1, 0),

    scale: function (zoom) {
        return Math.pow(2, zoom-naturalZoom);
    }
});

var map = L.map('map', {
    crs: L.CRS.Wall,
    maxBounds: new L.LatLngBounds([0,0], [4096, 4096])
});
map.setView([0,0], naturalZoom);

マップの境界を制限しようとしています (jsfiddle の例のコードの 26 行目のコメントを外します) が、これによりレイヤー全体のドラッグが中断されます。カスタム crs と maxBounds で同様の問題を抱えている人はいますか? これはリーフレット ライブラリのバグでしょうか?

助けてくれてありがとう。

4

1 に答える 1

2

project/unproject問題はあなたが壊れていることだと思いますか？とにかく、これを手動で行う必要はありません。Leaflet.js は px と latlng の間で変換する CRS を提供し、マップを次のように設定します。

var map = L.map('map', {
  maxZoom: 20,
  minZoom: 20,
  crs: L.CRS.Simple
}).setView([0, 0], 20);

次に、マップの境界を設定します（私の画像は1024x6145です）：

var southWest = map.unproject([0, 6145], map.getMaxZoom());
var northEast = map.unproject([1024, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

その後、次の方法でマーカーを追加できます。

var m = {
  x: 102, // px coordinates on full sized image
  y: 404
}
var marker = L.marker(map.unproject([m.x, m.y], map.getMaxZoom())).addTo(map);

map.unprojectpx から latlng に移動するために使用していることに注意してください。

画像を分割する方法など、これを行う方法をより詳細に書きましたが、上記は基本的な要点です。

于 2013-03-02T04:39:56.687 に答える