Как создать интерактивный слой сетки поверх карты с помощью OpenLayers

Question

Я как-то новичок в создании веб-сервисов с использованием Openlayers и Javascript. Я хотел бы создать кликабельный сетчатый слой поверх карты (например, 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. На стороне клиента вы регистрируете обработчик click-event на карте, который вы можете использовать для получения координат щелчка мыши. Используйте эти координаты, отправьте их на задний план и выполните пространственный запрос в базе данных, чтобы получить многоугольники, смежные с координатами. Затем ответ сервера должен содержать геометрию полигонов (в этом случае кодируется в 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.