Свои карты в Яндекс-Картах.
По мотивам вот этой статьи. Не захотелось тратить время на разработку своего движка,т.к. вдумчиво почитав документацию к API.Yandex пришел к выводу, что весь функционал необходимый для моих нужд, уже есть и написан. Один правда большой недостаток — для работы необходимо будет постоянное подключение к интернет, не нашел пока способа вытащить скрипты от яндекса в оффлайн. Итак, пошаговое руководство:
1) Подготавливаем изображение, которое будет у нас «картой». Для этого его нужно порезать «Кубиками» или в терминологии Яндекса — тайлы. В моем случае я сделал «порезку» автоматически, при загрузке изображения.
Скрипт «порезки» в итоге получился следующий:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 с параметрами: масштаб, имя файла, количество кубиков.
Далее в страницу вставляем
|
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:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// Как только будет загружен 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); } |
В итоге получаем чудо дивное: