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


How to create a clickable grid layer on top of a map using OpenLayers

我在某种程度上是使用Openlayers和Javascript制作Web服务的新手。我想在地图(例如OSM)上创建一个可点击的网格层,该图层首先具有定义的空间分辨率(例如200 m),当然当用户缩放时,网格大小会适应地图的新缩放级别。我还想用特定的颜色显示网格的每个单元格,当用户单击每个单元格时,可以显示一些信息。所以,我想每个像元都像这个图层中的一个要素(例如多边形)。我想知道 Openlayers 是否有现有的功能来做这样的事情,我可以使用,还是我必须对所有内容进行编码?关于我如何做到这一点的任何帮助和建议将不胜感激。下面是创建此类服务的服务的链接,我想做同样的事情......谢谢。

链接到示例:

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

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

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

  2. 使用客户端库创建地图并添加切片图层。OpenLayers和Leaflet都做得很好。(不过,如果你不熟悉这个话题,传单更容易掌握)。

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

  4. 使用这些面并使用所需的任何配色方案将它们添加到矢量图层。

看看

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

Openlayers 具有稍后创建交互式向量的工具。 为了创建类似于示例中的内容,您必须 1) 添加矢量图层,2) 编写一个将矢量要素添加到地图上适当位置的循环,3) 将要素样式设置为六边形,以及 4) 创建基于相应参数动态设置要素颜色的样式图。 每一步都由Openlayers促进。

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