Блог

У меня есть сеть датчиков, которые измеряют загрязнение воздуха. Я хочу создать тепловую карту этого загрязнения и показать ее пользователям на моем веб-сайте.

Я думаю о лучшем способе сделать это. Должна ли тепловая карта создаваться на серверной или интерфейсной стороне? Каковы плюсы и минусы обоих решений? Любые подробности — например, в каком формате я должен отправить тепловую карту на интерфейс (возможно, с использованием SVG?), Были бы очень признательны.

Я могу найти эти плюсы для сгенерированной серверной тепловой карты:

• Простая интеграция с другими сервисами — например, если я хочу, например, отправить карту загрязнения воздуха пользователям Slack, я могу просто загрузить фрагменты карты и поместить на нее сгенерированную тепловую карту.
• Простота внесения изменений — например. если я хочу изменить способ создания тепловой карты (например, цвета) Мне не нужно менять его во всех других местах, таких как веб-приложение, приложение для Android, приложение для iOS…

Минусы:

• Вероятно, больше данных для отправки клиенту.

Кроме того, можете ли вы назвать какие-либо реальные примеры сгенерированных серверных / интерфейсных объектов, которые помещаются поверх карты?

Немного сложно ответить, какое лучшее решение. Все зависит от данных.

• если у вас, скажем, умеренное количество точек данных, около 50-100, и вы предпочитаете четкий рендеринг на дисплее с высоким разрешением, тогда SVG — это путь.
• если у вас сотни или тысячи точек данных, рендеринг их с помощью SVG может снизить производительность на стороне клиента. В этом случае визуализируйте все в виде растрового изображения на стороне сервера и отправьте его клиенту.

Примеры:

• Карты Google (или любой другой картографический сервис) отображают карты в виде растровых плиток на стороне сервера. Классические карты Google в браузере (например, ios Safari, показывающие карты Google) больше ничего не сделают. Даже названия улиц отображаются в растровом изображении. (Стоит отметить, что на более мощных платформах, таких как Desktop Chrome, все делается сложнее.)

• Решения для построения диаграмм на стороне JS будут отображать вещи на стороне клиента. Выглядит великолепно для наборов данных до нескольких сотен точек. К сожалению, сбой на реальных данных (например, при работе на фондовом рынке такие примеры, как «показать цены на акции Apple», могут поставить эти решения на колени. (Все изменения цен на акции Apple с 1990 года, включая данные об уровне тиков (т.е. тысячи изменений в день), — это другая лига.

Просто для справки, в недавнем проекте после нескольких месяцев разработки мы не смогли сделать рендеринг на основе canvas на стороне клиента достаточно хорошо работающим на всех платформах, и выбрали рендеринг на стороне сервера и решили проблему за 4 дня работы.