Blog » gimp http://karta39.ru/blog Разные мысли и идеи :) Tue, 21 Feb 2012 08:02:27 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Краткое руководство по добавлению собственных карт на Google Maps. http://karta39.ru/blog/2009/01/26/kratkoe-rukovodstvo-po-dobavleniu-sobstvennix-kart-na-google-maps/ http://karta39.ru/blog/2009/01/26/kratkoe-rukovodstvo-po-dobavleniu-sobstvennix-kart-na-google-maps/#comments Mon, 26 Jan 2009 10:10:49 +0000 noonv http://karta39.ru/blog/?p=119 Добавить собственную карту не так сложно, как может показаться :)
Итак приступим…

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

Пример кусочка карты от Google:
http://mt1.google.com/mt?v=ap.88&hl=ru&x=285&y=162&z=9&s=G
mt

здесь можно видеть следующие значения
x=285 y=162 zoom=9

т.е. нам нужно хранить свою картинку по кусочкам вида:
tile_285_162_9.jpg
(или, разумеется, аналогичным образом хранить изображения в БД)
tile_285_162_9

Чтобы описать кусочек карты нужно знать три числа:
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
и т.д.
Нумерация идёт так же как и на карте – первый номер – столбец, второй – строка.

Чтобы переименовать (или лучше сказать – перенумеровать) получившиеся картинки я написал небольшой скрипт на питоне:

  2. #
  3. # For copy files from def-00-00.jpg to tile\tile_18243_10406_15
  4. #
  6. import os
  8. # for copy
  9. import shutil
  12. srcfile="p4-01-01.JPG"
  13. dstfile=""
  15. #-----------------------------------------
  16. #
  17. # begin here :)
  18. #
  19. print "Start..."
  21. path = srcfile
  23. tilex=281
  24. tiley_beg=160
  25. tiley=tiley_beg
  26. zoom='9'
  28. for i in range(1,10):
  29. for j in range(1,8):
  30. if i<= 9:
  31. x='0'+str(i)
  32. else:
  33. x=str(i)
  34. if j<= 9:
  35. y='0'+str(j)
  36. else:
  37. y=str(j)
  38. srcpath='p4-'+x+'-'+y+'.jpg'
  39. if os.path.exists(srcpath):
  40. print srcpath, ' exists'
  41. shutil.copy(srcpath,'tile\\tile_'+str(tilex)+'_'+str(tiley)+'_'+zoom+'.jpg')
  42. else:
  43. print 'Cant find', srcpath
  44. tiley+=1
  45. tilex+=1
  46. tiley=tiley_beg
  48. print "Done."

* This source code was highlighted with Source Code Highlighter.

В скрипте нужно установить следующие параметры:
tilex – номер крайнего изображения по вертикали на карте Google
tiley_beg – номер крайнего изображения по горизонтали на карте Google
zoom – уровень увеличения на карте Google
Далее изменить граничные условия циклов по количеству ваших полученных картинок.
Не забыть внести изменения в srcpath, внеся туда своё название картинки.
После выполнения скрипта в директории tile будут ваши файлы с именами:
tile_281_160_9.jpg
tile_281_161_9.jpg
…
tile_289_166_9.jpg

Осталось только настроить вывод вашей карты, средствами Google Maps.

Для приведённого примера:

  1. function add_custom_map(map)
  2. {
  3. var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(57.72883324000875,16.471134185791016),new GLatLng(49.693182016907464,25.556020736694336) ),8, "Karta39");
  4. var copyrightCollection = new GCopyrightCollection('Map Data:');
  5. copyrightCollection.addCopyright(copyright);
  7. var tilelayers = [new GTileLayer(copyrightCollection , 9, 9)];
  8. tilelayers[0].getTileUrl = CustomGetTileUrl;
  10. tilelayers[0].getCopyright = function(a,b)
  11. {
  12. var c= copyrightCollection.getCopyrightNotice(a,b);
  13. if (!c)
  14. {
  15. c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
  16. }
  17. return c;
  18. }
  20. var custommap = new GMapType(tilelayers, new GMercatorProjection(10), "Custom Map", {shortName:"1645"});
  22. map.addMapType(custommap);
  23. }
  25. function CustomGetTileUrl(a,b)
  26. {
  27. if (b==9 && a.x>280 && a.x<290 && a.y>159 && a.y<167)
  28. return "tile_"+a.x+"_"+a.y+"_"+b+".jpg";
  29. else
  30. return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
  31. }

* This source code was highlighted with Source Code Highlighter.

Как видно – сначала создаётся copyright для слоя, а затем сам слой с вашей картой.
В параметр getTileUrl передаётся функция возвращающая ваши кусочки карты – CustomGetTileUrl(a,b)
, где a – точка с параметрами a.x и a.y, которые указывают местоположение картинки по вертикали и горизонтали
b – уровень приближения слоя.
Строчка return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
Возвращает родную картинку Google Maps – если эту строчку убрать, то на карте будет отображаться только ваша картинка.

Полный вариант:

  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  4. <title>Google Custom Maps</title>
  5. <!-- key for karta39.ru :)  -->
  6. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsL2VORzTwmVBxxfMiMNG7hSQWpIDMILbmlKIxypjOkZkxcl47xRnQ74rU6B3rYRRuou-6ZHLri9jUA"
  7. type="text/javascript"></script>
  9. <script type="text/javascript">
  10. //<![CDATA[
  12. function initialize()
  13. {
  14. if (GBrowserIsCompatible())
  15. {
  16. var map = new GMap2(document.getElementById("map"));
  17. var mmmap = map;
  18. //map.addControl(new GScaleControl());
  19. map.addControl(new GLargeMapControl()); // контрол перемещения и приближения
  20. map.addControl(new GMapTypeControl()); // контрол режима карты
  21. map.setCenter(new GLatLng(54.707168569101256,20.510530471801758),9);    // Kaliningrad
  22. add_custom_map(map);
  23. }
  24. // display a warning if the browser was not compatible
  25. else
  26. {
  27. alert("Sorry, the Google Maps API is not compatible with this browser");
  28. }
  29. }
  31. function add_custom_map(map)
  32. {
  33. var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(57.72883324000875,16.471134185791016),new GLatLng(49.693182016907464,25.556020736694336) ),8, "Karta39");
  34. var copyrightCollection = new GCopyrightCollection('Map Data:');
  35. copyrightCollection.addCopyright(copyright);
  37. var tilelayers = [new GTileLayer(copyrightCollection , 9, 9)];
  38. tilelayers[0].getTileUrl = CustomGetTileUrl;
  40. tilelayers[0].getCopyright = function(a,b)
  41. {
  42. var c= copyrightCollection.getCopyrightNotice(a,b);
  43. if (!c)
  44. {
  45. c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
  46. }
  47. return c;
  48. }
  50. var custommap = new GMapType(tilelayers, new GMercatorProjection(10), "Custom Map", {shortName:"1645"});
  52. map.addMapType(custommap);
  53. }
  55. function CustomGetTileUrl(a,b)
  56. {
  57. if (b==9 && a.x>280 && a.x<290 && a.y>159 && a.y<167)
  58. return "tile_"+a.x+"_"+a.y+"_"+b+".jpg";
  59. else
  60. return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
  61. }
  62. //]]>
  63. </script>
  64. </head>
  65. <body onload="initialize()" onunload="GUnload()">
  66. <div id="map" style="width: 500px; height: 300px"></div>
  67. </body>
  68. </html>

* This source code was highlighted with Source Code Highlighter.

Посмотреть пример можно здесь: http://karta39.ru/map/2/cm.html
Стандартная карта:
1
Включён режим нашей карты:
2

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

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

Для этого нужно добавить в add_custom_map следующий код:

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

* This source code was highlighted with Source Code Highlighter.

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

Успехов!

Ссылки:
[1] http://code.google.com/intl/ru_ALL/apis/maps/documentation/reference.html
[2] http://econym.googlepages.com/index.htm – Google Maps API Tutorial
[3] http://econym.googlepages.com/custommap.htm
[4] http://int2e.com/blog/how-to-make-a-site-like-mapwowcom/
[5] http://mapki.com/wiki/Automatic_Tile_Cutter
[6] http://open.atlas.free.fr/GMapsTransparenciesImgOver.php

]]> http://karta39.ru/blog/2009/01/26/kratkoe-rukovodstvo-po-dobavleniu-sobstvennix-kart-na-google-maps/feed/ 4