Для разбиения изображения на кликабельные области и назначения каждой области уникального идентификатора можно использовать HTML и JavaScript.
1. Создайте HTML-разметку с использованием тега `<map>` для определения областей и `<area>` для определения каждой кликабельной области. Установите атрибуты `shape`, `coords` и `href` для каждой области, чтобы определить ее форму, координаты и ссылку (если нужно).
2. Вы можете создать области с прямоугольной формой, окружностями, полигонами и т. Д. В зависимости от формы вашего плана этажа.
3. В JavaScript вы можете добавить обработчики событий для каждой кликабельной области, чтобы перехватить клики или другие события пользователя и выполнить соответствующие действия.
4. Для связи областей с базой данных и установки соответствия между идентификаторами на фронтенде и в базе данных вы можете использовать AJAX-запросы, отправляя данные о клике на сервер, обрабатывая их и возвращая соответствующую информацию в ответ.
5. В базе данных вы можете хранить информацию о каждой области, ее идентификаторе и других связанных с ней данных. При получении AJAX-запроса вы можете сопоставить идентификаторы с базой данных для получения соответствующей информации и передать ее на фронтенд.
6. Когда вам нужно обновить соответствие между идентификаторами на фронтенде и в базе данных (например, при добавлении или удалении областей), вы можете использовать соответствующие запросы к базе данных для обновления данных на фронтенде.
Для реализации данной задачи можно использовать комбинацию HTML, CSS, JavaScript и серверных технологий, таких как PHP, Node.js или Ruby on Rails, в зависимости от вашего опыта и предпочтений. Также могут быть полезными JavaScript-библиотеки для обработки и отображения изображений, такие как Fabric.js или Konva.js.