0

理想的には、いくつかの長い (4096x20k) 画像を端から端まで表示したいのですが、間にいくらかのパディングを入れても問題ありません。. .

画像が [] のように見える場合、目的の出力は [][][][] のようになり、適切にタイル化されます。. .

私はこれを行うことができるいくつかのハッキーな方法を知っていますが、私が理想的に探していたのは次のようなものでした: L.tileLayer('blah{x}blah{y}blah{z}', {shiftTilesBy: [xOffset, yOffset] });

リーフレットがタイル化された画像の範囲をどのように把握するかを実際に理解することさえできないようです。404 になるまで、各軸のタイルを要求し続けますか? 1つ以上の画像を頻繁に更新しているため、画像を異なるレイヤーに保持したいと考えています。したがって、画像を1つの大きな画像に事前に融合することは、キャッシングなどの観点からは本当に魅力的ではありません。

これがプラグインなどとして存在しない場合は、私が書いて貢献します。それで、フォローアップの質問として、これを作成するためにソースを調べ始めるべき場所はありますか?

ありがとう。

4

1 に答える 1

2

4 つの別々のマップを用意する代わりに、1 つのマップを使用し、オーバーレイを使用してマップを 4 つのタイルに分割できますか?

HTMLは次のとおりです。

<body>
  <div id="map"></div>
  <div id="overlay">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

そしてCSS：

html {
    overflow:hidden;
}

html,
body,
#map,
#overlay {
    width:100%;
    height:100%;
    position:absolute;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    /* Requred if you want the map to respond to pointer events */
    pointer-events:none;
}

#overlay div {
    height:100%;
    border-right:15px solid #FFFFFF;
    width:23%;
    float:left;
}

そして今、シバン全体、ここに jsFiddleがあります。

結果は次のとおりです。 リーフレット 4 列の例

于 2013-03-03T22:57:36.447 に答える