HTML/JavaScript中的簡單多層縮放（地圖）瓷磚

Question

我正嘗試在JavaScript中創建一個簡單的多層縮放地圖（類似於Google地圖---您放大的細節越多看到）。我不想使用Google Maps API，因爲我正在創建虛構的寶藏地圖。

我只想要2個縮放級別---縮小和放大。我製作了500像素×500像素的圖塊。縮小視圖僅使用一個圖塊，放大視圖使用4個圖塊。瓦片的可視區域爲75像素×75像素（窗口）。在這兩個視圖中，用戶都可以平移。

下面是兩種觀點：

我有一個艱難的時間開始。我想在HTML/CSS/JavaScript中執行此操作。我發現了一種叫做Polymaps（http://polymaps.org）的東西，它似乎提供了我想要的東西，但具有很多額外的功能。沒有關於使用自定義圖塊創建地圖的教程。這可以用JavaScript輕鬆完成嗎？有什麼建議使用？

Answer 1

嘗試SVGPan library：

的SVGPan庫功能：

• 平移（PAN點菜谷歌地圖）（點擊白色背景和 PAN）

• 縮放（使用鼠標滾輪）

• 拖動元素（單擊一個繪圖元素並將其拖動一些這裏 其他人）的

• 組合上述像拖動

demo

Answer 2

這裏有三個選項，實現縮放，多分辨率的圖像縮放：

• 簡單的圖像平移/縮放庫： CanvasZoom
• 使用Google地圖API並提供您自己的圖塊。請參閱：Mike Couturier's Zoomable Image examples
• OpenLayers是支持自定義切片圖層的廣泛的開源 映射庫。