javascript - 如何使用 OpenLayers 在 map 顶部创建可点击的网格层

Question

在使用 Openlayers 和 Javascript 制作 Web 服务方面，我有点陌生。我想在 map (例如 OSM)顶部创建一个可点击的网格层，它首先具有定义的空间分辨率(例如 200 m)，当然当用户缩放时，网格大小会适应 map 的新缩放级别。我还想用特定颜色显示网格的每个单元格，当用户单击每个单元格时，可以显示一些信息。所以，我猜每个单元格就像这一层中的一个特征(例如多边形)。我想知道 Openlayers 是否有现有的功能来做我可以使用的事情，或者我是否必须对所有这些进行编码？任何有关我如何设法做到这一点的帮助和建议将不胜感激。下面是创建此类服务的服务的链接，我也想这样做...谢谢。

示例链接:

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

Answer 1

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

1. 您看到的网格，即彩色六边形，只是 map 图 block ，由自定义后端按照 Tile map 服务模式(我使用 NodeJS)提供服务，而后者又使用 Mapnik(任何其他引擎也应该工作，例如 GeoServer 或 MapServer)用于渲染图像。数据存储在添加了 PostGIS 的 Postgres 数据库中。

2. 使用客户端库创建 map 并添加切片图层。 OpenLayers 和 Leaflet 都能很好地完成这项工作。 (不过，如果您是该主题的新手，传单会更容易掌握)。

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

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

看看the code看看它是如何工作的。重要的文件是 osmatrix.js(连接到后端)、control.js(主模块，跟踪所有内容)和 map.js(令人惊讶的是，所有内容都与 map 相关)。