如何使用geoJSON座標（或數據）在HTML5畫布上繪製交互式地圖

我正在使用類似於Google Analytics的儀表板式Web應用程序，其中不同的數據集以不同的格式（包括地圖）顯示。如何使用geoJSON座標（或數據）在HTML5畫布上繪製交互式地圖

要求是地圖應該具有可點擊的區域，以便加載特定於該區域的數據，並且區域應具有懸停效果，much like this one。我不想使用谷歌地圖API，但我對圖書館開放。

現在，我有GeoJSON中的地圖數據（請參閱下面的代碼段），它將我帶入我的問題，如何使用geoJSON數據在HTML5畫布中繪製地圖？我知道這個問題有多普遍，因爲我真的不知道從哪裏開始。所以我非常需要有人握住我的手，讓我看看方向。請儘可能詳細地保留你的答案。謝謝。

{ 
    "type": "FeatureCollection", 
    "features": [{ "type": "Feature", "id": 0, 
    "properties": { "OBJECTID_1": 29, "OBJECTID": 29, "COUNTY_NAM": "BARINGO", "COUNTY_COD": 30, "Shape_Leng": 5.81571392065, "Shape_Area": 0.88451236881 }, 
    "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.028686523000033, 1.276123047000056 ], [ 36.036499023000033, 1.263916016000053 ], [ 36.039306641000053, 1.259887695000032 ],............[ 36.028686523000033, 1.276123047000056 ] ] ] } } 
    ] 
    }

我的研究將我引向了諸如openlayers，leaflet和d3等圖書館。這些都很棒，但帶有重要的學習曲線。我沒有任何反對的學習，但我想最簡單的解決方案來完成項目。

來源

2013-02-14 user1678293

好的，您需要更密切地定義項目。你想讓這張地圖可以拖動和縮放嗎？你想讓它與哪些瀏覽器兼容？最簡單的方法是從頭開始創建一個SVG元素，並用geoJSON數據中的行填充它，並附上onHover/onClick事件 - 使用jQuery來幫助。但是，這有兼容性問題，這是D3和OpenLayers給你的庫。 StackOverflow不適用於最終爲您完成工作的詳細手持操作。 – Spacedman 2013-02-15 08:18:27

我不應該用這句「握住我的手」，而不是我正在尋找的東西，只是一個正確的方向，你最近的評論已經完成了一部分。地圖不需要可縮放性，只有可點擊的區域觸發加載新內容。將地圖想象成各種導航。至於瀏覽器的兼容性，這不是一個值得關注的問題，因爲這個應用程序不是公用的，它是公司（客戶端）的儀表板。那麼geoJSON需要轉換爲svg路徑還是座標可用？ – user1678293 2013-02-15 08:29:59

在瀏覽器中查找關於SVG的一些基本教程。玩一玩，然後回來再問一些問題。你會發現它！ – Spacedman 2013-02-15 08:35:46

您需要一個JavaScript映射包。開放源碼選擇包括開放層和傳單。 Google會爲你找到它們。

來源

2013-02-14 21:53:28 Spacedman

我已經看過這些選項，但它看起來像矯枉過正。所有我想要做的是創建[這樣的事情]（http://download.ysatech.com/HTML5_Interactive_Map/InteractiveMapPath.aspx），但與geoJSON多邊形座標。任何想法如何我可以做到這一點？ – user1678293 2013-02-15 06:45:40

1.你沒有說你做過任何研究。 2.「所有我想做的」問題的困擾是你經常想要做更多的事情，而有限的工具會限制你。 3.你看過d3js.org嗎？ – Spacedman 2013-02-15 07:27:02

道歉不提我的研究。查看編輯的問題。我願意使用openlayers，傳單，甚至d3。在我用這些庫進入深層之前，我只想看看是否有更簡單的解決方案。 – user1678293 2013-02-15 08:17:25

如何使用geoJSON座標（或數據）在HTML5畫布上繪製交互式地圖

回答

相關問題