Форум

vita1ii · #1 (**permalink**) 21.02.2013, 13:04

Здравствуйте, ситуация такая: есть кусок карты в виде картинки (jpg, png), нужно на этом куске карты (изображении) рисовать по заданным координатам линии, а также в нужных местах ставить маркеры. Также хотелось бы эти маркеры передвигать, ставить на другое место, при увеличении или уменьшении изображения чтобы маркеры и линии не меняли своего размера (это уже второстепенно). В общем если в кратце - аналог яндекс или гугл карты только на моем изображении.

Подскажите, что лучше использовать для решения этой задачи, svg? canvas? какие библиотеки? спасибо.

PS сейчас вся информация (линии и маркеры) рисую на сервере (php + Image Magick), и уже отрисованую картинку показываю где нужно, реализовал зум колесом мыши, двигаю картинку, в общем казалось бы все хорошо, пока не понадобилось мышкой перетаскивать маркеры, удалять их а также чтобы линии и маркеры не уменьшались вместе с уменьшение зума (повторюсь - сейчас я показываю картинку с нарисованными на ней маркерами и линиями которые естественно при зуме уменьшаются или увеличиваются)

Спасибо.

Deff · #2 (**permalink**) 21.02.2013, 17:25

ну маркеры удобно всовывать в привязанный <span class="mark" style="position:absolute;margin-left:102px;margin-top:203px;width:0;height:0">Тут маркер</span>
У маркера тоже position:absolute, тогда его можно запихать чисто картинкой
Линию тоже можно запихнуть картинкой(вставив в <span> на подобие маркера, поворот картинки линии можно осуществить в новых браузерах css свойством transform:rotate
Остается сделать Drag and drop для данных <span> (Хотя имхо рисовать линии в канвасе - нагляднее)

vita1ii · #3 (**permalink**) 21.02.2013, 17:31

хм, а что же делать ели я буду двигать карту? перерисовывать маркер? он же я так понимаю вы предложили абсолютно позиционирован...

Deff · #4 (**permalink**) 21.02.2013, 18:09

Сообщение от vita1ii

хм, а что же делать ели я буду двигать карту? перерисовывать маркер? он же я так понимаю вы предложили абсолютно позиционирован...

Карту(с маркерами и т.д) всовываете в div с position:relative и двигаете этот div
Маркеры будут двигацо вместе с данным div и картой

vita1ii · #5 (**permalink**) 22.02.2013, 00:41

Про маркеры - понял, что-то с первого раза затупил, а вот с линиями не совсем понятно, как вставить катринку линию если я не знаю какой длины будет линия, угол ее наклона и тд. Что-то с канвасом не понял я вас.
Маркеры уже в процессе реализации, не сложно также сделать при увеличении/уменьшении изображения зум самого маркера, а вот как быть с линией?

vita1ii · #6 (**permalink**) 22.02.2013, 00:43

drag and drop не проблема кстати, это я уже сделал, даже под планшеты и мобильные устройства.

DjDiablo · #7 (**permalink**) 23.02.2013, 20:48

можно делать яндекс карты на основании своих изображений

<!DOCTYPE html>

<html>

<head>
    <title>Примеры. Создание собственной карты</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

<script type="text/javascript">
var myMap;

ymaps.ready(init);

function init () {
    // Создаем проекцию для декартовой системы координат.
    var myProjection = new ymaps.projection.Cartesian([
            // Определяем границы области отображения в декартовых координатах.
            [-1, -1],
            [1, 1]
        ]),

    // Создадим собственный слой карты:
        MyLayer = function () {
            return new ymaps.Layer(
                // Зададим функцию, преобразующую номер тайла
                // и уровень масштабировая в URL тайла на сервере.
                function (tile, zoom) {
                    return "http://mt.gmapuploader.com/tiles/FVSH1JsvdT/tile-" + zoom + "-" +
                        (tile[1] * Math.pow(2, zoom) + tile[0]) + ".jpg";
                }
            );
        };

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

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

    // Добавим миникарту и кнопку изменения масштаба на нашу карту.
    myMap.controls
        .add(new ymaps.control.MiniMap({
            type:'my#type'
        }))
        .add('smallZoomControl', { right:5, top:5 });
}
</script>
</head>

<style type="text/css">
    html, body, #map {
        width: 100%;
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
    }
</style>

<body>
<div id="map"></div>
</body>

</html>

vita1ii · #8 (**permalink**) 23.02.2013, 22:35

не, яндекс карты не покатит, спасибо в общем, буду думать...

Форум

Справочник

Discord чат

Курсы javascript