#google_maps #карты
Привет, кто сталкивался с добавлением гексагональной сетки для google карт?
Вот такую сетку нужно добавить на всю ширину карты, которая вмещается в экран:
Ответы
Ответ 1
Идея вкратце Упрощённо говоря, Google Maps – это всего лишь слой в HTML, который обрабатывает действия пользователя и на их основе манипулирует содержимым карты (по большей части изображениями). Ничего не мешает наложить поверх этого свой HTML слой с любым содержанием. Напротив, разработчики карт к этому и призывают, предоставляя функционал для преобразования географических координат к координатам внутри этого слоя (и больше ничего существенного не дают). Поэтому наложить можно вообще что угодно, главное – чтобы это было полезно и удобно в рамках Вашей задачи. Нюансы Вы действительно указали очень мало деталей. Например, зачем Вам это? Помимо любопытства это важно для ответа, из области применения вытекают важные моменты. Как минимум, у меня есть такие вопросы: Должна ли эта сетка быть привязана ко всему земному шару или только к каким-то регионам, с которыми Вы планируете работать? Варианты: глобус / регион. На мой взгляд, фраза "на всю ширину карты, которая вмещается в экран" не совсем отвечает на этот вопрос. Нужно ли Вам учитывать проекцию Меркатор? (Как упомянул @sanmai) Варианты: Меркатор / не Меркатор. Нужна ли Вам эта сетка с фиксированным масштабом, или же при приближении она должна увеличиваться и разделяться на более мелкие шестиугольники? Варианты: фикс / раздел. Должно ли быть какое-то взаимодействие с этими шестиугольниками? Должны ли они отображать цвета, текст? Варианты: взаимод / без взаимод. С технической стороны, как лучше реализовать наложение на Гугл-карты для Вашей задачи? По большей части, ответ на этот вопрос вытекает из ответов на предыдущие. Варианты: картинка / холст canvas или svg. Некоторое время назад я разрабатывал библиотеку GMapsTable для наложения таблицы на Google Maps (описание на Хабре), и могу сказать, что в любом случае это весьма непростая задача. В качестве наложения я использовал таблицу, так как шестиугольники мне не были нужны, а Меркатор не учитывался (данные не по глобусу, а регионам, искажения слабо заметны). Также, в таблицу легко добавлять текст (простым HTML) или взаимодействие (можно наляпать JS события отдельным ячейкам). Предлагаемые варианты решения В зависимости от комбинаций ответов: фикс, без взаимод – можно взять любую PNG картинку с сеткой и наложить на нужный участок карты. Это не зависит от проекции (Меркатор или нет) и от местоположения (глобус или регион), просто нужно подобрать / сгенерировать оптимально подходящее изображение. Довольно лёгкий, но на столько же мало функциональный способ. В большинстве остальных случаев я бы использовал холст или svg. Это сложно, особенно если погнаться за точностью, красотой, плавностью, зато возможности ничем не ограничены. Вне зависимости от фикс / раздел лучше задать готовый массив точек, а не вычислять всё в коде. Если нужны разделяющиеся шестиугольники, это также проще реализовать на основе имеющихся начальных вершин. В таком случае задача сводится всего лишь к созданию этого набора точек и алгоритма для их отрисовки, преобразования шестиугольников к координатам на экране. Вывод текста и цветов в таком случае относительно лёгок. Если нужно взаимодействие, то можно просто перехватывать событие клика и реализовать функцию обратного преобразования: от координаты на экране к конкретному шестиугольнику. Как создать набор исходных точек? Например, можно банально взять одну из картинок с шестиугольниками (Меркатор или нет, на Ваш выбор) и вручную или с кодом перевести все вершины в координаты широты/долготы. Можно составить их в отдельные объекты шестиугольников или же просто отдельно прописать линии между точками, если работы с шестиугольниками не планируется. Муторно, но альтернатива не проще: написать код для генерации сферы с поверхностью из шестиугольников и перевода этих же вершин, линий / шестиугольников в координаты карты. Полезные ссылки: Google Maps API: собственные наложения на карту – простой пример с наложением картинки. Исходный код GMapsTable – большой пример с динамическим наложением табицы.Ответ 2
Прямо так, как вы хотите, у вас не получится так сделать на всех увеличениях потому что на Гугл-картах используется проекция Меркатора. Это значит ближе к полюсам ваша сетка будет искажена, будто бы натянута на шар. Примерный вид: Картинка отсюда.
Комментариев нет:
Отправить комментарий