如何使用OpenLayers在地图上创建可单击的网格图层

Question

我在使用Openlayers和Javascript制作Web服务方面有点新鲜。我想在地图（例如OSM）的顶部创建可点击的网格图层，其首先具有定义的空间分辨率（例如200米），当然当用户缩放时，网格尺寸适应地图的新缩放级别。此外，我想显示具有特定颜色的网格的每个单元格，并且当用户点击每个单元格时，可以显示一些信息。所以，我想每个单元格就像这个层中的一个特征（例如多边形）。我想知道Openlayers是否有现有的功能来做我可以使用的这样的事情，还是我必须编写所有的代码？任何有关如何设法做到这一点的帮助和建议将受到高度赞赏。以下是创建此类服务的服务的链接，我想做同样的事情...... Thanx。

链接到示例：

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

Answer 1

开发了您在示例中提到的应用程序后，我可以给您一些关于您的问题的提示。解决方案非常简单。

1. 您看到的网格，即彩色六边形，只是地图图块，由Tile Map Service架构（我使用NodeJS）后面的自定义后端提供服务，而后者又使用Mapnik（任何其他引擎也应该可以工作，例如GeoServer或MapServer）来渲染图像。数据存储在Postgres数据库中，并添加了PostGIS。

2. 使用客户端库创建地图并添加平铺图层。 OpenLayers和Leaflet都做得很好。 （但是，如果您对该主题不熟悉，则单张传单会更容易理解。）

3. 在客户端，您在地图上注册了一个点击事件处理程序，您可以使用该处理程序获取鼠标单击的坐标。使用这些坐标，将它们发送到后端并对数据库执行空间查询以获得与坐标相邻的多边形。然后，服务器的响应应该提供多边形的几何形状（在这种情况下以GeoJSON编码，GML，KML也可以正常工作）以及您想要显示的任何信息。

4. 使用这些多边形并使用您想要的任何颜色方案将它们添加到矢量图层。

查看the code，看看它是如何运作的。重要的文件是osmatrix.js（连接到后端），control.js（主模块，跟踪所有内容）和map.js（令人惊讶的是，一切都与地图相关）。

Answer 2

Openlayers具有以后创建交互式矢量的功能。为了在示例中创建类似的东西，您必须1）添加矢量图层，2）编写一个循环，将矢量要素添加到地图上的适当位置，3）将要素设置为六边形，以及4）创建一个样式图，它根据适当的参数动态设置要素颜色。 Openlayers为每个步骤提供便利。

Answer 3

一个好的开始是使用传单库，因为它使用地图投影并阅读本教程：http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1。