Свои карты в Яндекс-Картах.

21.01.2013 Павел Грибов WEB

По мотивам вот этой статьи. Не захотелось тратить время на разработку своего движка,т.к. вдумчиво почитав документацию к API.Yandex пришел к выводу, что весь функционал необходимый для моих нужд, уже есть и написан. Один правда большой недостаток — для работы необходимо будет постоянное подключение к интернет, не нашел пока способа вытащить скрипты от яндекса в оффлайн. Итак, пошаговое руководство:

1) Подготавливаем изображение, которое будет у нас «картой». Для этого его нужно порезать «Кубиками» или в терминологии Яндекса — тайлы. В моем случае я сделал «порезку» автоматически, при загрузке изображения.

Скрипт «порезки» в итоге получился следующий:

function cuttingimg($zoom,$fn,$sz){
    $img=imagecreatefrompng("../../images/maps/".'0-0-0-'.$fn);  // получаем идентификатор загруженного изображения которое будем резать
    $info=getimagesize("../../images/maps/".'0-0-0-'.$fn);                          // получаем в массив информацию об изображении
    $w=$info[0];$h=$info[1];    // ширина и высота исходного изображения
    $sx=round($w/$sz,0);        // длинна куска изображения
    $sy=round($h/$sz,0);        // высота куска изображения
    $px=0;$py=0;                // координаты шага "реза"
    for ($y = 0; $y <= $sz; $y++) {        
        for ($x = 0; $x <= $sz; $x++) {            
             $imgcropped=imagecreatetruecolor($sx,$sy); // создаем пустой кубик
             imagecopy($imgcropped,$img,0,0,$px,$py,$sx,$sy); // вырезаем кусок и вставляем в кубик
             imagepng($imgcropped,"../../images/maps/".$zoom."-".$y."-".$x."-".$fn); // сохраняем кубик
             $px=$px+$sx;
            };
            $px=0;$py=$py+$sy;            
        };
//    return "ok";
};

...
...
...

function cuttingimg($zoom,$fn,$sz){

$img=imagecreatefrompng("../../images/maps/".'0-0-0-'.$fn); // получаем идентификатор загруженного изображения которое будем резать

$info=getimagesize("../../images/maps/".'0-0-0-'.$fn); // получаем в массив информацию об изображении

$w=$info[0];$h=$info[1]; // ширина и высота исходного изображения

$sx=round($w/$sz,0); // длинна куска изображения

$sy=round($h/$sz,0); // высота куска изображения

$px=0;$py=0; // координаты шага "реза"

for ($y = 0; $y <= $sz; $y++) {

for ($x = 0; $x <= $sz; $x++) {

$imgcropped=imagecreatetruecolor($sx,$sy); // создаем пустой кубик

imagecopy($imgcropped,$img,0,0,$px,$py,$sx,$sy); // вырезаем кусок и вставляем в кубик

imagepng($imgcropped,"../../images/maps/".$zoom."-".$y."-".$x."-".$fn); // сохраняем кубик

$px=$px+$sx;

};

$px=0;$py=$py+$sy;

};

// return "ok";

};

...

cuttingimg(1,$userfile_name,2);
cuttingimg(2,$userfile_name,4);
cuttingimg(3,$userfile_name,8);

функция cuttingimg с параметрами: масштаб, имя файла, количество кубиков.

Далее в страницу вставляем

<div id="map" style="height: 600px; width: 600px;"><script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"type="text/javascript"></script> 
<script type="text/javascript" src="controller/client/js/maps.js"></script>

1 2	<div id="map" style="height: 600px; width: 600px;"><script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"type="text/javascript"></script> <script type="text/javascript" src="controller/client/js/maps.js"></script>

,где код map.js:

   // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);

        function init () {
            // Создаем декартову систему координат, на которую будет проектироваться карта.
            // Определяем границы области отображения в декартовых координатах.
            var myProjection = new ymaps.projection.Cartesian([
                    [-1, -1], // координаты левого нижнего угла
                    [1, 1]    // координаты правого верхнего угла
                ]),
                // Создадим собственный слой карты:
                BlackSeaLayer = function () {
                    return new ymaps.Layer(
                        // Зададим функцию, преобразующую номер тайла и уровень масштабировая
                        // в URL до тайла на нашем хостинге
                        function (tile, zoom) {
                            //$("#msgid").html("images/maps/"+tile[0] + "-" + tile[1] +imgmap);
                            return "images/maps/"+zoom+"-"+tile[1] + "-" + tile[0]+"-" +imgmap;
                            //return "images/maps/slice_" + tile[1] + "_" + tile[0] + ".png";
                        }
                    )
                };

            // Добавим конструктор слоя в хранилище слоёв под ключом my#blacksea
            ymaps.layer.storage.add('my#blacksea', BlackSeaLayer);
            // Создадим новый тип карты, состоящий только из нашего слоя тайлов,
            // и добавим его в хранилище типов карты под ключом my#blacksea
            ymaps.mapType.storage.add('my#blacksea', new ymaps.MapType(
                'План помещений',
                ['my#blacksea']
            ));

            // Создаем карту в заданной системе координат.
            var myMap = new ymaps.Map('map', {
                    center: [0,0],
                    zoom: 1,
                    // Указываем ключ нашего типа карты
                    type: 'my#blacksea'
                }, {
                    maxZoom: 3, // Максимальный коэффициент масштабирования для заданной проекции.
                    minZoom: 1, // Максимальный коэффициент масштабирования
                    projection: myProjection
                });

                myMap.controls.add(new ymaps.control.ZoomControl());
                myMap.controls.add('mapTools');

            var myPlacemark = new ymaps.GeoObject(
                {
                    geometry: {type: "Point",coordinates: [1, 1]},                    
                    properties: {iconContent: 'Системный блок'}
                },
                {
                    preset: 'twirl#greenStretchyIcon',
                    draggable: true
                }
            );

            myMap.geoObjects.add(myPlacemark);

        }

// Как только будет загружен API и готов DOM, выполняем инициализацию

ymaps.ready(init);

function init () {

// Создаем декартову систему координат, на которую будет проектироваться карта.

// Определяем границы области отображения в декартовых координатах.

var myProjection = new ymaps.projection.Cartesian([

[-1, -1], // координаты левого нижнего угла

[1, 1] // координаты правого верхнего угла

]),

// Создадим собственный слой карты:

BlackSeaLayer = function () {

return new ymaps.Layer(

// Зададим функцию, преобразующую номер тайла и уровень масштабировая

// в URL до тайла на нашем хостинге

function (tile, zoom) {

//$("#msgid").html("images/maps/"+tile[0] + "-" + tile[1] +imgmap);

return "images/maps/"+zoom+"-"+tile[1] + "-" + tile[0]+"-" +imgmap;

//return "images/maps/slice_" + tile[1] + "_" + tile[0] + ".png";

}

)

};

// Добавим конструктор слоя в хранилище слоёв под ключом my#blacksea

ymaps.layer.storage.add('my#blacksea', BlackSeaLayer);

// Создадим новый тип карты, состоящий только из нашего слоя тайлов,

// и добавим его в хранилище типов карты под ключом my#blacksea

ymaps.mapType.storage.add('my#blacksea', new ymaps.MapType(

'План помещений',

['my#blacksea']

));

// Создаем карту в заданной системе координат.

var myMap = new ymaps.Map('map', {

center: [0,0],

zoom: 1,

// Указываем ключ нашего типа карты

type: 'my#blacksea'

}, {

maxZoom: 3, // Максимальный коэффициент масштабирования для заданной проекции.

minZoom: 1, // Максимальный коэффициент масштабирования

projection: myProjection

});

myMap.controls.add(new ymaps.control.ZoomControl());

myMap.controls.add('mapTools');

var myPlacemark = new ymaps.GeoObject(

{

geometry: {type: "Point",coordinates: [1, 1]},

properties: {iconContent: 'Системный блок'}

{

preset: 'twirl#greenStretchyIcon',

draggable: true

}

);

myMap.geoObjects.add(myPlacemark);

}

В итоге получаем чудо дивное:

Оставить комментарий api, map, map.yandex, yandex, карты

Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Свои карты в Яндекс-Картах.

Добавить комментарий Отменить ответ