Собственные карты Google Maps

Добавить собственную карту не так сложно, как может показаться . Земля в Google Maps разворачивается в проекцию Меркатора – т.е. представляет собой развёрнутый на плоскость цилиндр, что даёт нам прямоугольник, который разбивается на маленькие квадратики (tiles) с размерами 256x256 пикселей.

Пример кусочка карты от Google:

https://mt1.google.com/mt?v=ap.88&hl=ru&x=285&y=162&z=9&s=G

Здесь можно увидеть следующие значения - x=285 y=162 zoom=9, т.е. нам нужно хранить свою картинку по кусочкам вида tile_285_162_9.jpg (или, разумеется, аналогичным образом хранить изображения в БД).

Чтобы описать кусочек карты нужно знать три числа:

1 – его номер по вертикали (числа растут сверху вниз (т.е. с севера на юг)) (в примере - 285)
2 – его номер по горизонтали (числа растут справа налево (с запада на восток)) (162)
3 – его уровень увеличения (zoom) (9)

Таким образом карту можно представить в виде стопки слоёв, каждый из которых состоит из маленьких квадратиков (очевидно, что число квадратиков становится больше при увеличении уровня приближения).

Итак, у нас есть изображение, которое мы хотим наложить на карту или показать вместо карты.

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

В самом простом случае можно загрузить нужный нам участок карты и посмотреть информацию о полученных изображениях (в FireFox: Инструменты->Информация о странице - > Мультимедиа) или же можно воспользоваться online-сервисом [6].

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

Tile_18250_10410_15.jpg

К сожалению, данный сервис вываливается с ошибкой при попытке разрезать большие картинки. В таком случае - придётся резать картинку самостоятельно.

Следует учесть, что картинку придётся подгонять под те самые квадратики карты!

Можно воспользоваться Photoshop-ом, я же использую для этих целей Gimp. Чтобы в нём разрезать картинку нужно по вертикали и горизонтали картинки (уже подогнанной под карту, т.е. уже обрезанной или смещённой нужным образом) через каждые 256 пикселей вывести направляющие (Изображение->Направляющие->Новая направляющая). Далее выполняем преобразование гильотина (Изображение->Преобразование->Гильотина). После этого у нас появится много кусочков изображения, которые сохраняются с именами вида:

p4.jpg – исходное изображение
p4-00-00.jpg
p4-01-00.jpg
…
p4-01-07.jpg
..
p4-09-00.jpg

и т.д.

Нумерация идёт так же как и на карте – первый номер – столбец, второй – строка. Чтобы переименовать (или лучше сказать – перенумеровать) получившиеся картинки я написал небольшой скрипт на питоне:

#
# For copy files from def-00-00.jpg to tile\tile_18243_10406_15
#

import os

# for copy
import shutil
srcfile="p4-01-01.JPG"
dstfile=""

#-----------------------------------------
#
# begin here
#
print "Start..."

path = srcfile

tilex=281
tiley_beg=160
tiley=tiley_beg
zoom='9'

for i in range(1,10):
for j in range(1,8):
if i<= 9:
x='0'+str(i)
else:
x=str(i)
if j280 && a.x159 && a.y
//280 && a.x159 && a.y
Посмотреть пример можно здесь: https://karta39.ru/map/2/cm.html

Стандартная карта:

Включён режим нашей карты:

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

Для ознакомления с другими возможностями вывода своих карт можно почитать [3]. Там показано как сделать так, чтобы ваш слой был полупрозрачным. Для этого нужно добавить в add_custom_map следующий код:

var paleLayer = new GTileLayer(copyrightCollection,12,12);
paleLayer.getTileUrl = CustomGetTileUrl;
paleLayer.getOpacity = function() {return 0.5}
var tilelayers3 = [G_NORMAL_MAP.getTileLayers()[0], paleLayer];
var custommap3 = new GMapType(tilelayers3, new GMercatorProjection(10), "1645 Mixture", {shortName:"1645Mx"});
mmmap.addMapType(custommap3);

Вот, в принципе, и всё .

Успехов!