Хабрахабр

[Из песочницы] Интерактивная карта субъектов России для новичка. Ошибки, которые допустил я и которые не должны допустить вы

В этой статье я расскажу, как мы столкнулись с типовыми ошибками при создании интерактивной карты, а главное — дам вам ссылки на нормальные, актуальные карты субъектов РФ.

Создать интерактивную карту, чтобы при наведении на регион срабатывал обработчик событий и выводил некоторые данные по регионам (например, его название).
На первый взгляд это кажется очень простым, но далее в статье я расскажу, как мы потратили больше 3 дней на вылавливание, а самое главное — на определение багов. Наша задача.

Для начала нам потребуется, собственно, сама карта: идем в Гугл получаем целый ворох различных форматов картографических данных. Итак, начинаем проект.

Поскольку мы не профессиональные геоаналитики, нам в принципе плевать на форматы — главное, чтобы работало, поэтому мы тут не будем рассматривать все и вся, а выделим две основные группы.

  • Векторные карты
  • Карты с метаданными

Основной формат такого типа карт — SVG. Векторные карты — это обычный векторный многоугольник, повторяющий форму какого-нибудь объекта, например, страны. Это просто геометрическая фигура без данных, даже без названия. И я сразу скажу, почему он плох для нашего проекта и почему его вообще не стоит использовать в интерактивных картах. Если еще с картой федеральных округов это можно сделать, то на районном уровне вы просто умрете. Если вы не мазохоист, то вы не будете вручную прикручивать обработчик событий к каждому полигону и вписывать вручную всю информацию об объекте, от акронимов на разных языках до административного статуса.

Карты с метаданными, если совсем простым языком, это те же векторные полигоны, только с зашитой внутри информацией. Карты с метаданными. Вообще их много, у каждого из них свои особенности, про которые вам может рассказать только сведущий в ГИС-системах человек. Форматов очень много, я перечислю основные: GeoJSON, SHP, GeoTIFF, MIF, TAB, KML.

Все карты ниже содержат название региона, его описание, численность населения и etc. В данной статье рассматривается только GeoJSON из-за того, что в проекте было принято решение использовать только этот формат с метаданными.

И тут начинается самое веселое. Мы разобрались с форматом и ищем данные уже с конкретным расширением. Пфф, не тут-то было, впереди вас ждёт множество приключенией. Вы думаете легко найти рабочие хорошие карты РФ? Итак, вы скачали карту, все настроили, запустили и…

Первые ссылки в гугле вас ведут на gis-lab. Крым. Тут все просто. И на этих картах нет полуострова. А если вы в свой проект вставите карту без Крыма, будучи в России, вы сами понимаете, что может произойти. Основные российские карты сделаны в 2000 и 2010 году, т.е до включения Крыма в состав РФ, а многие западные сервисы не признают присоединение и не добавляют полуостров в свои карты. Поэтому делать карту без этой территории не вариант.

Но скорее всего вы их не найдете. Решение: Искать любительские сборки карт позднее 2014 года или иностранные сервисы, которые все-таки добавляют Крым в российские карты.

Заходим в Гугл, вбиваем “скачать geojson субъекты РФ”, находим, скачиваем карту с mydata.biz и… У нас все распухло. Идем искать дальше.

В некоторых картах в субъекты включены территориальные воды. Поплывшие границы. Если вы непритязательный, то наверное можете использовать и эту карту, но для моего проекта это категорически неприемлемо.
Решение. Из-за того, что территория всех граничащих с морем субъектов увеличена на 24 км, карта выглядит “поплывшей”, особенно регионы с береговой линией и островами. Искать дальше карты без учета территориальных вод.

В глубинах интернета на заброшенном сайте вы нашли карты, вроде и с Крымом и не “поплывшие”, скачиваете и... Идем дальше.

Границы субъектов наезжают друг на друга.

Также она может появиться из-за неправильного сжатия или упрощения карт. Эта проблема часто встречается в любительских картах, границы субъектов наезжают друг на друга и из-за этого возможно некорректное отображение элементов.

Красные точки — это пересечение полигонов друг на друга.

Это не всегда дает артефакты в отображении, но при большом количестве ошибок может произойти следующая картина:

Решение: Искать карты без наезда полигонов друг на друга.

Где-то каким-то чудом вы находите хорошую карту — с Крымом, без территориальных вод, без наездов полигонов друг на друга и… Ищем дальше.

Карта весит 35mb из-за чрезмерной детализации, и слабые компьютеры начинают тормозить при отображении. Все зависает.

Для geojson советую mapshaper.org. Решение: Искать карту с меньшей детализацией или сжать карту.

Часть Чукотки идеально отрезало от остальной России. Все, вы прошли девять кругов ада, нашли идеальную карту, качаете и ее и….

image

Чукотка. Чукотка. Это слово стоит много раз повторить, ведь если вы новичок, то вы застрянете с этой проблемой надолго. Чукотка. У вас не получится отрезать этот кусок и приклеить к остальной России, у вас не получится без багов перенести все объекты в центр и т.д. Вам будет нелегко понять, что это не битая карта, это не ошибка, и это не так легко исправить, как вам кажется на первый взгляд. А если и получится, то это будут жутчайшие костыли, а мы не одобряем такие методы.

Разрезанная Чукотка

Я не буду вдаваться в подробности, а сразу раскрою карты.

Все дело в том, что по умолчанию в картографических сервисах стоит проекция (да, вам придется понять, что такое проекция и какие они бывают) CRS84 у которой, грубо говоря, отсчет координат идет от 180 меридиана, т.е карта начинается и заканчивается на Чукотке. Это не ошибка. Представьте, что вы разрезаете и разворачиваете глобус по этой линии.

С точки зрения проекции CRS84 все отображается правильно.

Не думаю, что надо тратить большое количество времени на её изучение, если вам просто необходимо сделать интерактивную карту в свой проект. Проекция — это огромная и сложная тема. Также я не буду подробно разжевывать, а расскажу только о тех проекциях, которые помогут корректно отобразить карту РФ.

Но, как я понял, это нестандартная проекция и многие сервисы, например, http://geojson.io, не поддерживают отход от стандарта. Проекция Asia lambert conformal conic вернет Чукотку на место.

С конической проекцией (Conic equal area projection) у нас все заработало после небольшой доработки.

Поставив коническую проекцию, вы увидите следующую картину: Россия завалилась на бок и наполовину утонула.

image

Это решается банальным переворачиванием и зумом карты: Это снова не баг — карта корректно отобразилась, а по умолчанию стоит вот такой угол.

<ComposableMap projection=> <ZoomableGroup> <Geographies geography={map}> {(geographies, proj) => geographies.map(geo => ( <Geography projection={proj} geography={geo} /> )) } </Geographies> </ZoomableGroup> </ComposableMap>

В итоге у вас получится такая карта:

Почти. … с которой все хорошо, она без косяков и красивая. Он не особо заметен и не сильно вредит композиции. Все же остался “чукотский шрам” который мы не смогли убрать. Мы не нашли способа, как его убрать, да и, если честно, не искали — слишком были замучены предыдущими ошибками и решили оставить все как есть.

Будь у нас такая статья месяц назад, она сэкономила бы кучу нервов нашей команде и, надеюсь, сэкономит и ваши. Итак, мы с вами разобрали типовые ошибки при проектировании интерактивной карты.

Вы рассмотрели следующие проблемы:

  • Отсутствует Крым
  • В субъекты включены территориальные воды
  • Границы субъектов наезжают друг на друга
  • Карта имеет слишком большой вес
  • Чукотку разрезает по 180 меридиану

Заметка от разработчика из команды

карта рендерится на сервере. Ещё одна сложность заключалась в том, чтобы найти компонент для отрисовки карт, который не будет зависеть от клиентской части, т.к. Мы используем фреймворк Next.js, который основан на React, поэтому просто d3-geo не подошёл, нужно было найти React компонент.

S.: Статья написана только для того, чтобы молодые и зеленые как мы не тратили по 2-3 дня на мучения с картами, а учились на чужих ошибках. P. Она написана не программистом, не геоаналитиком, не картографом, а простым проджектом, так что на все претензии и неточности предлагаю написать свою статью в русскоязычном сегменте, где вы подробно объясните, как нужно делать, так как я не нашел нормальных источников информации.

Карты:

На июнь 2019 лучшие российские карты
Большой банк карт со всего мира среднего качества

Сервисы:

Онлайн просмотр карт и инструмент для их сжатия
проекция

Проекция
React компонент для отрисовки карт

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть