Хочу сделать карту, на которой можно отображать маркеры.
Посмотрел много примеров.
Но так и не понял насчет проекций.
Я создаю карту, принудительно задаю ей projection "EPSG:4326" (как я понимаю это обычные координаты долгота/широта в градусах), displayProjection тоже "EPSG:4326".
Добавляю слой карт OSM (Мапник он называется вроде).
Как я понимаю у его тейлов другая проекция - 'EPSG:900913' (центр в пересечении экватора и нулевого меридиана, отсчет в метрах).
Добавляю свой слой, на котором будут маркеры.
Задаю ему projection "EPSG:4326".
Пытаюсь добавлять туда маркеры (вектор - точки).
Я предполагал что добавлять точки в этот слой я буду указанием просто широты и долготы. А получается что чтобы точку показало в правильном месте мне надо обязательно преобразовывать координаты.
Почему?
Вот мой код:
Создание карты:
Код: Выделить всё
var map;
map = new OpenLayers.Map('map', { displayProjection: new OpenLayers.Projection("EPSG:4326"),
projection: new OpenLayers.Projection("EPSG:4326"), controls: [new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()]
});
Код: Выделить всё
var mapnik = new OpenLayers.Layer.OSM('OSM mapnik');
map.addLayer(mapnik);Код: Выделить всё
var Markers = new OpenLayers.Layer.Vector("Markers" , {projection: new OpenLayers.Projection("EPSG:4326")} );
map.addLayer(Markers);Код: Выделить всё
// координаты маркеров
var GeoPointKiev = new OpenLayers.Geometry.Point(30.565469,50.435782);
var OSMPointKiev = new OpenLayers.Geometry.Point(30.565469,50.435782).transform("EPSG:4326", 'EPSG:900913');Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>OpenLayers Example</title>
<style>
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function InitMap() {
map = new OpenLayers.Map('map', { displayProjection: new OpenLayers.Projection("EPSG:4326"),
projection: new OpenLayers.Projection("EPSG:4326"), controls: [new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()]
});
// слой карты
var mapnik = new OpenLayers.Layer.OSM('OSM mapnik');
map.addLayer(mapnik);
// слой маркеров
var Markers = new OpenLayers.Layer.Vector("Markers" , {projection: new OpenLayers.Projection("EPSG:4326")} );
map.addLayer(Markers);
//alert(Markers.projection);
// координаты маркеров
var GeoPointKiev = new OpenLayers.Geometry.Point(30.565469,50.435782);
var OSMPointKiev = new OpenLayers.Geometry.Point(30.565469,50.435782).transform("EPSG:4326", 'EPSG:900913');
// пример с хабры
var marker1 = new OpenLayers.Feature.Vector(
//долгота/широта
GeoPointKiev,
//данные по вкусу
{},
//Стиль, как отрисовывать
{
//рисуем картинку
externalGraphic: 'http://www.openlayers.org/dev/img/marker.png',
//вот такой ширины
graphicWidth: 21,
//вот такой вышины *
graphicHeight: 25,
//сместив картинку на 8 пикселей влево
//относительно координат геометрии
graphicXOffset: -8,
//и на 16 пикселей вверх
graphicYOffset: -16,
//с милой подписью (подпись будет выводиться прямо на карту)
label: 'GeoPoint',
//с базовой точкой текста подписи посередине-сверху текста
labelAlign: 'ct',
//сдвинув текст на 5 пикселей вниз
labelYOffset: '5'
}
);
var marker2 = new OpenLayers.Feature.Vector(
//долгота/широта
OSMPointKiev,
//данные по вкусу
{},
//Стиль, как отрисовывать
{
//рисуем картинку
externalGraphic: 'http://www.openlayers.org/dev/img/marker.png',
//вот такой ширины
graphicWidth: 21,
//вот такой вышины *
graphicHeight: 25,
//сместив картинку на 8 пикселей влево
//относительно координат геометрии
graphicXOffset: -8,
//и на 16 пикселей вверх
graphicYOffset: -16,
//с милой подписью (подпись будет выводиться прямо на карту)
label: 'OSMPoint',
//с базовой точкой текста подписи посередине-сверху текста
labelAlign: 'ct',
//сдвинув текст на 5 пикселей вниз
labelYOffset: '5'
}
);
Markers.addFeatures([marker1, marker2]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="InitMap()">
<div style="width: 100%; height: 100%" id="map"></div>
</body>
</html>
http://windy.p.ht/OSM3.html
Мне хотелось бы, чтобы на Киев показывала GeoPoint. Возможно ли это?
Подскажите пожалуйста, что не так.