Рисование на карте (маркеры, траектория)
Здравствуйте, ситуация такая: есть кусок карты в виде картинки (jpg, png), нужно на этом куске карты (изображении) рисовать по заданным координатам линии, а также в нужных местах ставить маркеры. Также хотелось бы эти маркеры передвигать, ставить на другое место, при увеличении или уменьшении изображения чтобы маркеры и линии не меняли своего размера (это уже второстепенно). В общем если в кратце - аналог яндекс или гугл карты только на моем изображении.
Подскажите, что лучше использовать для решения этой задачи, svg? canvas? какие библиотеки? спасибо. PS сейчас вся информация (линии и маркеры) рисую на сервере (php + Image Magick), и уже отрисованую картинку показываю где нужно, реализовал зум колесом мыши, двигаю картинку, в общем казалось бы все хорошо, пока не понадобилось мышкой перетаскивать маркеры, удалять их а также чтобы линии и маркеры не уменьшались вместе с уменьшение зума (повторюсь - сейчас я показываю картинку с нарисованными на ней маркерами и линиями которые естественно при зуме уменьшаются или увеличиваются) Спасибо. |
ну маркеры удобно всовывать в привязанный <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> (Хотя имхо рисовать линии в канвасе - нагляднее) |
хм, а что же делать ели я буду двигать карту? перерисовывать маркер? он же я так понимаю вы предложили абсолютно позиционирован...
|
Цитата:
Маркеры будут двигацо вместе с данным div и картой |
Про маркеры - понял, что-то с первого раза затупил, а вот с линиями не совсем понятно, как вставить катринку линию если я не знаю какой длины будет линия, угол ее наклона и тд. Что-то с канвасом не понял я вас.
Маркеры уже в процессе реализации, не сложно также сделать при увеличении/уменьшении изображения зум самого маркера, а вот как быть с линией? |
drag and drop не проблема кстати, это я уже сделал, даже под планшеты и мобильные устройства.
|
можно делать яндекс карты на основании своих изображений
<!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>
|
не, яндекс карты не покатит, спасибо в общем, буду думать...
|
| Часовой пояс GMT +3, время: 10:08. |