如何使用OpenLayers在地圖頂部創建可點擊的網格圖層

Question

我在使用Openlayers和Javascript製作網絡服務方面有點新鮮。我想在首先具有定義的空間分辨率（例如200米）的地圖（例如OSM）之上創建可點擊的柵格圖層，當然，當用戶縮放柵格尺寸以適應地圖的新縮放級別時。另外我想用特定顏色顯示網格的每個單元格，並且當用戶單擊每個單元格時，可以顯示一些信息。所以，我猜每個單元格都像這個圖層中的一個特徵（例如多邊形）。我想知道Openlayers是否有現成的功能來做這樣的事情，我可以使用，還是我必須編寫所有的代碼？任何幫助和建議，我如何能夠做到這一點將受到高度讚賞。下面是創建這種服務的服務的鏈接，我想做同樣的... Thanx。

鏈接樣本：

http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066

Answer 1

開發了您在示例中提到的應用程序後，我可以爲您提供一些關於您的問題的提示。解決方案非常簡單。

1. 您所看到的網格，即彩色六邊形，簡直就是地圖瓦片，瓦片地圖服務的架構（我用的NodeJS），反過來，使用Mapnik的（下面由一個自定義的後端服務任何其他引擎也應該如此，例如GeoServer或MapServer）來渲染圖像。數據存儲在添加了PostGIS的Postgres數據庫中。

2. 使用客戶端庫創建地圖並添加平鋪圖層。 OpenLayers和Leaflet都能很好地完成這項工作。 （然而，如果您對這個主題感興趣，小冊子會更容易掌握）。

3. 在客戶端，您在地圖上註冊了單擊事件處理程序，您可以使用它獲取鼠標單擊的座標。使用這些座標，將它們發送到您的後端，並對數據庫執行空間查詢以獲取與座標相鄰的多邊形。然後，服務器的響應應該提供多邊形的幾何圖形（在這種情況下用GeoJSON編碼，GML，KML也應該可以正常工作）以及任何想要顯示的信息。

4. 使用這些多邊形並使用任何所需的顏色方案將它們添加到矢量圖層。

看看the code看它是如何工作的。重要的文件是osmatrix.js（連接到後端），control.js（主模塊，跟蹤所有內容）和map.js（令人驚訝的是，所有與地圖有關的內容）。

Answer 2

良好的開端是使用單張庫，因爲它使用的地圖投影和閱讀本教程：http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1。

Answer 3

Openlayers提供了用於稍後創建交互式矢量的工具。爲了創建類似於示例中的內容，您必須1）添加矢量圖層，2）編寫一個循環，將矢量要素添加到地圖上的適當位置，3）將要素設置爲六邊形，以及4）創建一個基於適當參數動態設置特徵顏色的樣式表。 Openlayers爲每個步驟提供便利。