4

私はWebアプリケーションに取り組んでいます。私はそれを行う方法を知りたいだけです。地図アプリケーションのようなものですが、地図ではありません。

mysql データベースの div 内の Web ページに 100 個の画像を表示する必要があります。各画像は特定の事前定義タイルに表示されます。私は次の機能主義者が欲しいです。

  1. 画像の読み込み（全画像ではありません）
  2. ズームインとズームアウト。地図のように画像を更新します。
  3. スクロール。地図のように画像を更新します。

a. 私のdivは25枚の画像しか表示できません。その領域に25枚の画像だけをロードしたい。残りの画像は、スクロールまたはズームインおよびズームアウト時にロードする必要があります。

b. ユーザーが「ズームイン」をクリックするとロードされ、Googleマップのように大きな画像の次のレイヤーが表示され、ズームアウトをクリックすると小さな画像の前のレイヤーが表示されます。

このアプリケーションを構築する方法を誰か教えてください。OpenLayers、geo サーバー、ajax-zoom は既にチェック済みです。マッピングアプリケーションではないため、ジオサーバーには行きたくありません。しかし、マップと同じ機能が必要です。これを行うには jquery プラグインを使用しますか。

助けてください

よろしく、 アシフ・ハメド

4

1 に答える 1

1

少々乱暴ですが、以下のアドバイスをお願いします。

2.CSSのzoomプロパティで簡単にズームイン・アウトできます。難しいのは、特定の位置を拡大することです。

これを行うには、サイズ変更可能な仕切り要素を別の要素内に配置できます。包含要素にはoverflowofnoneがあり、同じサイズのままです。そうすれば、指の位置 (タッチ デバイスがこれを使用することが予想される場合) と div 内の位置に基づいて正確な座標を取得できます。

デスクトップでズームインするだけの場合は、原点変数を画面の中央に設定します。

画像を変更する限り、設定された CSS プロパティが十分に大きい/小さい場合は、単純に新しい画像を読み込むことができます。ただし、可能であれば、より大きな画像を一度ロードすることをお勧めします。http リクエストが減り、読み込み時間が短縮されます。

1.ズーム量を考慮して、現在の座標間の距離が特定のしきい値を超えると、画像をロードできます。

3. スクロールとは、パンしたりズームインしたりすることを意味しますか?

スクロール ズーム効果を実現するには、いくつかの方法があります。1 つの方法は、スクロールバーを必要とする、指定された内側の高さを持つすべてのものの上に非表示の要素を置くことです。scrollHeight-clientHeightユーザーがこの要素をスクロールすると、とプロパティを比較した後、イベントによって通常のズームと同じイベントが発生する可能性がありscrollTopます。

パンの場合は、イメージ ラッパーleftとtopプロパティを変更するだけです。

それがすべて役に立ったことを願っています。

于 2012-08-04T12:27:14.010 に答える