Генплан посёлка на основе Яндекс api v2 или как соотнести координаты картинки и карты

Цель нашей работы заключается в:

• Получить карту с нужными нам отметками (отметки уникальные и могут располагаться в разных местах).
• При наведение на отметку выдаём информацию о ней (номер дома).
• При нажатии на отметку показывать дополнительное описание (содержимое) отметки.
• Карта имеет полноценные возможности масштабирования и навигации.

Иногда требуется организовать навигацию по определенной части карты например по местности. Поэтому нам на помощь приходят Яндекс карты, пользовательские слои, управление своими картами. Во многом может показаться, а зачем всё это описывать если у Яндекса есть на это решение. Сразу отвечаю у Яндекса есть на это функция, а на каждую задачу решений нет.

Для работы я использовал:

• Яндекс API
• jQuery — так как он был в основном проекте.
• ПО от Яндекс «Подготовка слоя тайлов»
• Картинка от дизайнера, желательно не маленькая (мне предоставили 7987px на 3607px этого вполне хватит)
• Notepad++ и руки

Сразу вид того что мы получили:

Начнём подготовку тайлов:

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

После мучительных расстановок точек сохраняем наши тайлов. В итоги у вас должно выйти что-то наподобие:

маленькие нарезки разрешением 256х256 в соответствующих папках для зуммера. Кол-во папок и их нумерация зависит от кол-во зумирование картинки.

Меняем в генерированном файле подключаемые скрипты на:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script>     <script src="app.js" type="text/javascript"></script> 

В нутри тега body оставляем только:

<div id="YMapsID"></div> <!--ну и сразу добавим наши точки --> <map id="ImageMapsCom" name="image-maps">     <a href="/catalog/projects/aleksandrovskij_21186_kvm3/"        alt="Татьянинский"        title="ул. Домбасова 1a"        data-maps="2042,239,2137,331"        class="hause_items_shows"        data-info="1310">         <div class="show-items-info">             <img src="/images/cms/data/catalog/12.jpg" alt=""><div class="description-house">             <p class="status"><span>Сотояния:</span><span color="1716">Продан</span></p><p class="plowad"><span>Площадь: </span>5,05</p><p class="stoimost"><span>Стоимость: </span></p></div></div>     </a>     <a href="/catalog/projects/aleksandrovskij_21186_kvm3/"        alt="Татьянинский 265,29 кв.м."        title="МАГАЗ"        data-maps="1319,1237,1441,1339"        class="hause_items_shows"        data-info="1310">         <div class="show-items-info">             <img src="http://adveks.gowhiterabbit.ru/images/cms/data/content/minimarket.png">         </div>     </a> <!--и дальше . . . . --> </map> 

Немножко с индивидуальным стилем карты, подключим наш стиль:

#YMapsID {  width: 100%;  height: 100%;  min-height: 600px; } #YMapsID > ymaps {  background: url("bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0); } #YMapsID .ymaps-copyrights-pane, #YMapsID .ymaps-controls-rightbottom {  display: none; } #YMapsID.hause_items_shows{  display: none; } #YMapsID.show-items-info {  background: none repeat scroll 0 0 rgba(253, 250, 243, 0.8);  left: 0;  padding: 15px;  top: 0;  width: 250px;  z-index: 19; } 

Настройки карты:

var options = {     tileUrlTemplate: "./%z/tile-%x-%y.png",     controls: {         typeControl: true,         miniMap: false,         toolBar: true,         scaleLine: true     },     scrollZoomEnabled: true,     mapCenter: new YMaps.GeoPoint( Долгота , Широта ),     backgroundMapType: YMaps.MapType.NONE,     mapZoom: 17,     isTransparent: true,     smoothZooming: false,     layerKey: "my#layer",     mapType: {         name: "Генплан",         textColor: "#000000"     },     copyright: "",     layerMinZoom: 16,     layerMaxZoom: 20 }; 

Функция получения дынных из выгруженных

Здесь реализован переход из системы навигации картинки (по пикселам) в системы навигации карты (градусы) т.е. переводим пиксели в градусы.

var contentString = new Array(); function strat_masiv() {     var clo_in=0;     $('#ImageMapsCom .hause_items_shows').each(function (_index, _label) {         var blocks = $(_label);         contentString[clo_in] = new Array();         var bjects_alt = $(blocks).attr('alt');         var example = $(blocks).attr('data-maps').split(',');         var max_x_dpi = 39.05776, // конечный координаты карты             max_x_px = 7986, // конечный координаты картинки             min_x_dpi = 39.048469, // начальные координаты карты             max_y_dpi = 51.74439, // конечный координаты карты             max_y_px = 3606, // конечный координаты картинки             min_y_dpi = 51.747;// начальные координаты карты         contentString[clo_in][0] = $(blocks).attr('title');         contentString[clo_in][1] = $(blocks).html();         //Правый Y         contentString[clo_in][2] = min_y_dpi+((((parseInt(example[1], 10)*100)/max_y_px)*(max_y_dpi-min_y_dpi))/100);         //Правый X         contentString[clo_in][3] = min_x_dpi+((((parseInt(example[0], 10)*100)/max_x_px)*(max_x_dpi-min_x_dpi))/100);         contentString[clo_in][4] = $(blocks).attr('href');         contentString[clo_in][5] = '';         //Левый Y         contentString[clo_in][6] = min_y_dpi+((((parseInt(example[3], 10)*100)/max_y_px)*(max_y_dpi-min_y_dpi))/100);         //Правый X         contentString[clo_in][7] = min_x_dpi+((((parseInt(example[2], 10)*100)/max_x_px)*(max_x_dpi-min_x_dpi))/100);         clo_in++      });     console.log('Y='+contentString[0][6]+' x='+contentString[0][7]); }     ymaps.ready(function () {         strat_masiv();          // Передаем его в конструктор класса TilerConverter и получаем ссылку на карту.         var myMap = (new TilerConverter(options)).getMap();         //создаём точки         for (var i = 0; i < contentString.length; i++) {             contentString[i][5] = new ymaps.Rectangle([                 [contentString[i][2],contentString[i][3]],                 [contentString[i][6],contentString[i][7]]             ], {                 balloonContentHeader: contentString[i][0],                 balloonContent: contentString[i][1],                 balloonContentFooter: "<a href='" + contentString[i][4] + "'>подробней</a>",                 hintContent: contentString[i][0]             }, {                 fillColor: '#7df9ff33',                 fillOpacity: 0.5,                 strokeColor: '#0000FF',                 strokeOpacity: 0.5,                 strokeWidth: 2,                 borderRadius: 6             });             myMap.geoObjects.add(contentString[i][5]);         }; }); 

После всех настроек, по вашему желанию, чтобы не видеть эти квадратик вокруг домиков ставим:

 fillOpacity: 0,  strokeOpacity: 0, 

Полный файл скриптов
Ссылка на репозиторий!