建立類似谷歌地圖的界面的建議

我正在嘗試製作一些基於網絡的棋盤遊戲，並且我希望界面能夠平移和縮放。與Google地圖中的方式非常相似，您可以平移和縮放地圖，我希望移動和縮放遊戲板。當然不像谷歌地圖，我做的是而不是想用圖片拼貼。建立類似谷歌地圖的界面的建議

任何人都可以給我推薦使用哪種技術？這是否適合純HTML？ HTML 5畫布？或SVG？任何特定的JS庫推薦或其他東西完全？

我想避免閃存和Java。瀏覽器的兼容性加上，但不是最重要的因素。例如，我認爲對於較老的IE需要Chrome Frame可能會很好。

任何想法/建議，將不勝感激。

2010-11-01 user37078

我知道你提到過你不想使用圖片（儘管我不確定如何在沒有圖片的情況下構建自定義地圖UI），但Google的地圖API允許用戶使用自定義地圖。 http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypes – 2010-11-01 16:07:14

他只說他不想要「圖片拼貼」。一個滾動/裁剪的大SVG不會使用圖像拼貼，也不會使純粹的畫布解決方案簡單地重繪可見部分。圖像拼貼是一種方便（和兼容！）的方式來處理瀏覽器中一組大部分固定的位圖，但它們並不是繞大面積滾動的唯一方式。 – Ken 2010-11-03 19:39:36

的一點想法：

使用OpenLayers UI用「fixed」的策略來加載矢量圖形您的主板的一次。（這可能是過重的重量，但帶有pan-zoom和IE兼容性。）
使用Raphael在SVG中構建您的主板，使用RaphaelZPD進行pan-zoom。 RaphaelZPD不是跨瀏覽器的（儘管Raphael是），所以你需要Chrome Frame來兼容IE。我認爲這將是非常輕量級的。
爲您的開發板使用純SVG，使用SVGpan進行pan-zoom。這裏也需要Chrome Frame，儘管你可以使用SVGweb。你可以在Inkscape中繪製你的主板，清理SVG並在XML中添加你需要的任何ID（SVG是XML下的），如果你願意，還可以用jQuerySVG與主板進行交互，或手工編寫腳本交互。我提到CSS是否可以與SVG一起使用？ 我認爲這是你最好的選擇。
我想不出一個優勢，這裏使用Canvas，除非你有大量動畫或位圖。 SVG在工作方式上更加透明 - 它是XML的基礎，在頁面中呈現時，它變成了可以在現代瀏覽器中輕鬆操作的DOM節點。
純HTML可能很難處理縮放。我已經看到了很多圖像縮放器，但是沒有看到複雜的HTML結構，並且複雜度會因需要在縮放級別平移而變得更加複雜。

來源

2011-02-16 04:13:35 peteorpeter

SVGPan很棒。感謝你的回答。 – user37078 2011-02-16 15:05:38

SVGPan的瀏覽器嗅探可以防止mousewheel事件放大Opera，這並不好。 – 2011-10-14 08:25:04

如果您不介意拼貼，我建議您查看Polymaps「使用SVG的圖像和矢量平鋪地圖的JavaScript庫」。可能借用某些部件進行平移和縮放。

來源

2010-11-02 10:10:59

我想我想避免平鋪，因爲我正在使用相對較小的表面，而不像地圖本身必須覆蓋的表面區域。無論如何，這可能會有幫助，所以我會看看。謝謝。 – user37078 2010-11-02 19:51:07

Polymaps太複雜了，它甚至不值這個案例 – 2011-10-13 20:24:26

如果您想要完全控制您的開發環境，您可以創建自己的Web渲染平臺。我認爲你可以使用HTML canvas 5作爲你的瀏覽器界面。

您可以使用HTML畫布輕鬆實現拖動，平移和縮放。這種方法在許多平臺上與遊戲開發非常相似。 Here將HTML canvas 5用於支持平移，拖動和縮放的界面的示例。

控制您的環境，您將擁有廣泛的可能性。

來源

2013-05-29 00:10:41

建立類似谷歌地圖的界面的建議

回答

相關問題