9

Open Street maps とpaperfold CSS animationに取り組んでいます。

にマップを配置しました

<section class="comment" style="height:250px;">
     <p> <div id="demoMap" style="height:250px;"></div></p>
</section>

しかし、それは完全な地図を表示できませんでした。正確な理由はわかりませんが、マップのタイルを複製できなかった js ライブラリで推測しました。

createFold: function(j, topHeight, bottomHeight) {
    var offsetTop = -j * topHeight;
    var offsetBottom = -this.height + j * topHeight + this.foldHeight;
    
    return $('<div>') 
        .addClass('fold')
        .append(
            $('<div>')
                .addClass('top')
                .css('height', topHeight)
                .append(
                    $('<div>')
                        .addClass('inner')
                        .css('top', offsetTop)
                        .append(this.content.clone())
                )
                .add($('<div>')
                .addClass('bottom')
                .css('height', bottomHeight)
                .append(
                    $('<div>')
                        .addClass('inner')
                        .css('bottom', offsetBottom)
                        .append(this.content.clone())
                )
            )
        );
    },

マップのタイルを複製する方法はありますか、それとも間違っていますか。もしそうなら、どうすればこれを達成できますか...

4

1 に答える 1

0

タイル要素にアクセスできる限り、それらを複製できますが、(インターフェースが現在同じであると仮定して) それらimgは OpenStreetMap に完全に配置されたタグのように見えます - s は折りたたまれているため、要素自体をdiv複製する必要がありますimg（そして、ライブラリで動作すると仮定して、代わりに別の位置でそれを使用します）、または を作成しdiv、画像からURLを引き出して、背景として適用しますdiv. タイルには論理的に番号が付けられているため、必要な領域がわかっている場合は、その手順をスキップできます。おそらく次のようになります。

var startX = 7,
    endX = 8,
    startY = 3,
    endY = 10,
    scale = 5,
    $parent = $('<div class="map"></div>');

for (var y = startY; y <= endY; y++) {
    var $row = $('<div class="tile-row"></div>');
    for (var x = startX; x <= endX; x++) {
        $row.append(
            $('<img />')
            .attr('src', 'http://path.to.images/'+scale+'/'+x+'/'+y'.png');
        );
        // or:
        // $('<div></div>')
        // .css('background-image', 'http://path.to.images/'+scale+'/'+x+'/'+y'.png');

    };
    $parent.append($fold);
};

OpenStreetMap 自体のネイティブ フォーマットは、おそらくこの特定のライブラリには向いていないでしょう (特に、絶対位置に配置された画像の場合)。そのためposition: static、絶対位置を避けて、含まれているものに分割して、より構造的なレイアウトを模倣する必要があると思います。折り畳み可能な列。

于 2015-02-06T12:13:43.827 に答える