0

データベースから画像を表示するアプリケーションに取り組んでいます。アプリケーションにマップの機能を追加したいと考えています。お気に入り

  1. 私は目に見えないグリッドを作成し、そのグリッドにデータベースからの画像を表示しています。データベース内の各画像には、(行、列) のようなアドレスがあります。すべての画像をそれぞれのグリッド ID で表示したい。

  2. スクロール (スクロール時にサーバーにリクエストを送信し、ページを新しい画像で更新する必要があります。)

  3. ズーム (ズームインまたはズームアウトし、要求をサーバーに送信して、ズームインまたはズームアウトの値に応じて大きいサイズまたは小さいサイズの新しい画像でページを更新する必要があります。)

  4. すべての画像をダウンロードしたくありません。ズーム、スクロールなどの場合に特定の領域を更新したいだけです。

以下は私のコードで、表示とスクロールに使用しています。

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">

#overscroll { width: 500px; height: 500px; overflow: hidden; border: solid 1px #000; margin: 30px auto; position: relative; }
#overscroll ul { width: 2500px; margin:0; padding: 0; }
#overscroll li { display: block; float: left; width: 100px; height: 100px; background-color: #FFF; }
#overscroll li.alt { background-color: #C00; }
#overscroll li.no-drag { background-color: #000; color: #FFF; }
#overscroll li.last { clear: both; visibility: hidden; height: 0; padding: 0; }
  </style>


 </head>
 <body>
 <?php
 $dbCon = mysql_connect("localhost", "root", "");
 $db = mysql_select_db("db");
 $sql = "SELECT * FROM images";
 $result = mysql_query ($sql);
 $rows = 3;
 $cols = 3;
 $zoom = 1;

 echo "<div id='overscroll'>";
 echo "<table width='600px' border='1'>";
 for ($i=1; $i<=$rows; $i++){

echo "<tr>";
for ($j=1; $j<=$cols; $j++){
    $data = mysql_fetch_array($result);
    if ($data[3] != '')
        echo "<td align='center'><img src='{$data[3]}' width=100 height=100></td>";
    else
    echo "<td align='center'><img src='abc.jpg' width=100 height=100></td>";    
    }
echo "</tr>";
 }  


 ?>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.overscroll.js"></script>
<script>
    $(function(o){  
        o = $("#overscroll").overscroll({
            cancelOn: '.no-drag',
            //hoverThumbs: true,
            //persistThumbs: true,
            //showThumbs: false,
            scrollLeft: 200,
            scrollTop: 100
        }).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
            console.log(event.type);
        });
        $("#link").click(function(){
            if(!o.data("dragging")) {
                console.log("clicked!");
            } else {
                return false;
            }
        });
    });
</script>
</body>
</html>

私はjavascriptプラグインを使用しています。

html5 キャンバスを使用しますか? その種のアプリケーションについて、もしそうなら、誰かが私にオープンソースのリファレンスを送ってくれませんか? どうすればこのタスクを達成できますか? 私は ajax-zoom と他のマップ API をチェックしましたが、それは私に適した解決策ではありません。ジオサーバーで作業できません。

助けてください

4

1 に答える 1

0

http://openlayers.org/を使用して調査します。

于 2012-08-07T12:45:13.690 に答える