| RSS



Меню

Bookmark and Share


Статистика
Ваш IP: 3.228.10.17
Вы используете: v





Сейчас на сайте:

Тех поддержка ->

Облако тэгов
ОС видио Tor Обратная сторона антенна 4.6 PHP Эксплоит Windows Server 2008 qip Virtual chroot kernel proc sysctl tune FreeBSD bridge Boot Disk Bluetooth GEO game directx Emulator Python Shell DDoS червь Conficker вирус троян Лаборатория Касперского пиратство apple iPhone ИТ-отрасль Щеголев Microsoft экономический кризис Twitter социальная сеть анонимность Лицензия Open Source ASP.NET MVC уязвимость MySQL база данных файлообмен закон франция пират Skype мобильный Deutsche Telekom Хакер киберпреступник Trend Micro кибератака Германия робот утечка данных персональные данные ноутбук интернет Китай цензура ядро Linux Торвальдс Windows Vista Acer Linux патент браузер Firefox Internet Explorer Opera Net Applications Safari Intel Linux Foundation Moblin Oracle патч банкомат кардер HSM IBM X-Force Cofee сша кибервойна Эстония Dell ИТ-специалист хакерские атаки Pirate Bay контроль кибербезопасность язык программирования The Pirate Bay Пиратская партия утечка информации приговор Mozilla Chrome безопасность Госдума СМИ Windows 8 Баллмер взлом Пентагон ботнет Украина Facebook Cisco cloud Windows XP нетбук торрент музыка биометрический nokia ФБР IP-адрес CIPAV Comcast sms RSA java Google CAPTCHA Symantec спам конфиденциальная информация инсайдер Perimetrix антивирус тест Anti-Malware Windows 7 операционная система Windows провайдер авторское право RapidShare UNIX свиной грипп шантаж дети EFF BluWiki копирайт экстремизм Panda Security cloud computing McAfee Cybercrime Response Unit Bottle Domains HTTPS ICANN студент шпионское ПО Норвегия школьник New York Times XSS YouTube Warner Music кибершпионаж КНДР Ubuntu свободное ПО AMD ATI касперский Россия РФ сервер хостинг фальшивый антивирус Comodo CA Wi-Fi D-Link суд пароль блог фишинг Одноклассники медведев контрафакт мошенник штраф Sony GPS по Gumblar JAVASCRIPT хакеры вредоносное ПО Yahoo ФАС компьютер Софт MPAA кибероружие PandaLabs Red Hat Минкомсвязи сбой ASUSTeK Computer мошенничество Доктор Веб ВКонтакте Cyber-Arc исходный код PCI DSS МВД фильтр порнография BREIN свобода слова Казахстан GEMA Autodesk сисадмин Gmail кредитная карта кибермошенник LiveJournal шифрование криптография Deep Purple банк нанотехнологии Wikipedia zero-day ColdFusion выборы кража данных DNS BIND Android BASIC атака Black Hat Mac OS X Click Forensics Clampi домен фсб Прокуратура Уголовное дело icq Barrelfish киберпреступность Sophos AT&T ошибка Electa Gamma Knife OpenBSD DARPA военные Сайт Visual Studio 2010 .NET Framework 4 Chrome OS электронная почта турция конференция спамер FTC полиция российская ОС Koobface Великобритания БЕЛОРУССИЯ грузия BSA Bittorrent облачные вычисления Azure Европа Dr.Web Билл Гейтс спецслужбы Cryzip Живой Журнал Royal Bank of Scotland смартфон Canonical Pwn2Own F-Secure Symbian Hotmail фильм

Главная » Статьи » Общие Статьи

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

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

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

http://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 j<= 9:
y='0'+str(j)
else:
y=str(j)
srcpath='p4-'+x+'-'+y+'.jpg'
if os.path.exists(srcpath):
print srcpath, ' exists'
shutil.copy(srcpath,'tile\\tile_'+str(tilex)+'_'+str(tiley)+'_'+zoom+'.jpg')
else:
print 'Cant find', srcpath
tiley+=1
tilex+=1
tiley=tiley_beg

print "Done."

В скрипте нужно установить следующие параметры:

  • 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.

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

function add_custom_map(map)
{
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(57.72883324000875,16.471134185791016),new GLatLng(49.693182016907464,25.556020736694336) ),8, "Karta39");
var copyrightCollection = new GCopyrightCollection('Map Data:');
copyrightCollection.addCopyright(copyright);

var tilelayers = [new GTileLayer(copyrightCollection , 9, 9)];
tilelayers[0].getTileUrl = CustomGetTileUrl;

tilelayers[0].getCopyright = function(a,b)
{
var c= copyrightCollection.getCopyrightNotice(a,b);
if (!c)
{
c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
}
return c;
}

var custommap = new GMapType(tilelayers, new GMercatorProjection(10), "Custom Map", {shortName:"1645"});

map.addMapType(custommap);
}

function CustomGetTileUrl(a,b)
{
if (b==9 && a.x>280 && a.x<290 && a.y>159 && a.y<167)
return "tile_"+a.x+"_"+a.y+"_"+b+".jpg";
else
return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
}

Как видно – сначала создаётся copyright для слоя, а затем сам слой с вашей картой.

В параметр getTileUrl передаётся функция, возвращающая ваши кусочки карты - CustomGetTileUrl(a,b), где a – точка с параметрами a.x и a.y, которые указывают местоположение картинки по вертикали и горизонтали; b – уровень приближения слоя.

Строчка return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b); возвращает родную картинку Google Maps – если эту строчку убрать, то на карте будет отображаться только ваша картинка.

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

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Custom Maps</title>
<!-- key for karta39.ru :) -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsL2VORzTwmVBxxfMiMNG7hSQWpIDMILbmlKIxypjOkZkxcl47xRnQ74rU6B3rYRRuou-6ZHLri9jUA"
type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[

function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
var mmmap = map;
//map.addControl(new GScaleControl());
map.addControl(new GLargeMapControl()); // контрол перемещения и приближения
map.addControl(new GMapTypeControl()); // контрол режима карты
map.setCenter(new GLatLng(54.707168569101256,20.510530471801758),9); // Kaliningrad
add_custom_map(map);
}
// display a warning if the browser was not compatible
else
{
alert("Sorry, the Google Maps API is not compatible with this browser");
}
}

function add_custom_map(map)
{
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(57.72883324000875,16.471134185791016),new GLatLng(49.693182016907464,25.556020736694336) ),8, "Karta39");
var copyrightCollection = new GCopyrightCollection('Map Data:');
copyrightCollection.addCopyright(copyright);

var tilelayers = [new GTileLayer(copyrightCollection , 9, 9)];
tilelayers[0].getTileUrl = CustomGetTileUrl;

tilelayers[0].getCopyright = function(a,b)
{
var c= copyrightCollection.getCopyrightNotice(a,b);
if (!c)
{
c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
}
return c;
}

var custommap = new GMapType(tilelayers, new GMercatorProjection(10), "Custom Map", {shortName:"1645"});

map.addMapType(custommap);
}

function CustomGetTileUrl(a,b)
{
if (b==9 && a.x>280 && a.x<290 && a.y>159 && a.y<167)
return "tile_"+a.x+"_"+a.y+"_"+b+".jpg";
else
return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
}
//]]>
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Посмотреть пример можно здесь: http://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);

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

Успехов!

Ссылки

[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

Категория: Общие Статьи | Добавил: aka_kludge (30.04.2009)
Просмотров: 1413 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
    Главная      
...
На службе : дней

04:53
Обновить


Пользователи
aka_kludge
qwerty
LeadyTOR
aka_Atlantis
AdHErENt
mAss
Sissutr
hiss
DrBio
tHick

Поиск


Copyright tHR - TeAM 2020 г. admin: aka_kludge (ICQ:334449009) Moderator's: LeadyTOR, ... Яндекс.Метрика