OpenLayers 3 + YandexMap
-
- Интересующийся
- Сообщения: 25
- Зарегистрирован: 16 сен 2015, 16:43
- Репутация: 7
- Откуда: Королёв
OpenLayers 3 + YandexMap
Здравствуйте! Такой вопрос, как можно подключить к openLayers3 слой с картами Yandex?
-
- Интересующийся
- Сообщения: 25
- Зарегистрирован: 16 сен 2015, 16:43
- Репутация: 7
- Откуда: Королёв
Re: OpenLayers 3 + YandexMap
Для тех кто может быть столкнется с такой проблемой, как смещение координат при подключение YandexMap.
Исправить это можно, подключив библиотеку Proj4js. Описав проекцию YandexMap (EPSG:3395). Для примеру приведу свой код:
Прилагаю скриншоты до и после:
Исправить это можно, подключив библиотеку Proj4js. Описав проекцию YandexMap (EPSG:3395). Для примеру приведу свой код:
Код: Выделить всё
proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs');
view = new ol.View({
center: [4701182.98765148, 7492051.764399836],
zoom: 5,
maxZoom: 18,
projection:'EPSG:3395',
minZoom: 2
});
- Филиппов Владислав
- Гуру
- Сообщения: 1035
- Зарегистрирован: 17 фев 2006, 06:28
- Репутация: 144
- Ваше звание: Геннадич
- Откуда: Новосибирск
- Контактная информация:
Re: OpenLayers 3 + YandexMap
а какой источник (ol.source) и какие параметры (улр....) вы используете для Яндекса?
-
- Интересующийся
- Сообщения: 25
- Зарегистрирован: 16 сен 2015, 16:43
- Репутация: 7
- Откуда: Королёв
Re: OpenLayers 3 + YandexMap
Код: Выделить всё
var yandexMapLayerMap = new ol.layer.Tile({
'title': 'Яндекс Карты',
type: 'base',
projection: 'EPSG:3395',
source: new ol.source.XYZ({
url: 'http://vec02.maps.yandex.net?l=map&v=2.8.3&z={z}&x={x}&y={y}'
})
});
var yandexMapLayerSat = new ol.layer.Tile({
'title': 'Яндекс Спутник',
zIndex: 997,
projection: 'EPSG:3395',
visible: false,
source: new ol.source.XYZ({
url: 'http://sat02.maps.yandex.net?l=sat&v=2.8.3&z={z}&x={x}&y={y}'
})
});
- AlexSek
- Интересующийся
- Сообщения: 18
- Зарегистрирован: 12 апр 2010, 20:23
- Репутация: 1
- Контактная информация:
Re: OpenLayers 3 + YandexMap
Добавлю в эту ветку тк вроде по теме, вроде все сделал по инструкции а смещение никуда не делось, что не так?
Код: Выделить всё
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.13.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs');
var view = new ol.View({
center: [4187136.7833, 7509542.7662],
zoom: 10,
maxZoom: 18,
projection: 'EPSG:3395',
minZoom: 2
});
var yandexMapLayerMap = new ol.layer.Tile({
type: 'base',
projection: 'EPSG:3395',
source: new ol.source.XYZ({
url: 'http://vec02.maps.yandex.net?l=map&v=2.8.3&z={z}&x={x}&y={y}'
})
});
var rosreg = new ol.layer.Tile({
projection: 'EPSG:900913',
source: new ol.source.TileArcGISRest({
url: 'http://maps.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/'
})
});
var layersGroup = new ol.layer.Group({
layers: [
yandexMapLayerMap,
rosreg,
],
});
var map = new ol.Map({
target: 'map',
view: view
});
map.setLayerGroup(layersGroup);
</script>
</body>
</html>
Пишу красиво и грамотно...
-
- Интересующийся
- Сообщения: 25
- Зарегистрирован: 16 сен 2015, 16:43
- Репутация: 7
- Откуда: Королёв
Re: OpenLayers 3 + YandexMap
Как то подробнее хотелось бы узнать. Насколько большое смещение? Яндекс карты даже между собой имеют небольшое смещение https://yandex.ru/blog/mapsapi/36655, а что уж тут говорить относительно других, там итак подавно. Если смещение большое, то это скорее всего что у вас проекция второго слоя Googleское, я использовал EPSG:3857 или EPSG:4326, уже не помню точно.AlexSek писал(а):Добавлю в эту ветку тк вроде по теме, вроде все сделал по инструкции а смещение никуда не делось, что не так?
- Denis Rykov
- Гуру
- Сообщения: 3376
- Зарегистрирован: 11 апр 2008, 21:09
- Репутация: 529
- Ваше звание: Author
- Контактная информация:
Re: OpenLayers 3 + YandexMap
Тоже возникли проблемы с Yandex Map. Пытаюсь отобразить точку с известными координатами, OpenLayers трансформирует их правильно, а вот сама подложка почему-то смещена, пример.
Spatial is now, more than ever, just another column- The Geometry Column.
-
- Активный участник
- Сообщения: 146
- Зарегистрирован: 30 авг 2015, 16:38
- Репутация: 25
- Контактная информация:
Re: OpenLayers 3 + YandexMap
тоже мучился, перепробовал всякие варианты- в результате перешел на leaflet, там нет смещенияDenis Rykov писал(а):Тоже возникли проблемы с Yandex Map.
- Denis Rykov
- Гуру
- Сообщения: 3376
- Зарегистрирован: 11 апр 2008, 21:09
- Репутация: 529
- Ваше звание: Author
- Контактная информация:
Re: OpenLayers 3 + YandexMap
Совместными усилиями разобрались. Вообщем получается так, что для того, чтобы отобразить подложку Yandex-а недостаточно одного лишь описания проекции EPSG:3395. Оказывается, Yandex использует тайловую сетку такую же как OpenStreetmap, а именно:
То есть сетка натянута на гуглошарик (сфера, используемая в проекции EPSG:3857), а не на эллипсоид. Я почему-то думал, что раз проекция EPSG:3395, то и сетка будет: Вычислено так:
То есть я ошибочно предполагал, что координаты верхнего левого угла верхнего левого тайла (0,0) должны быть (-20037508.34, -19994875.25). В Yandex же координаты левого верхнего угла левого верхнего тайла такие же как и в OSM - (-20037508.342789244, -20037508.342789244), однако интересный момент - раз там нет данных (а нет их там потому что проекция данных EPSG:3395), то Yandex их и не рендерит. Вот пример: на 20 уровне данные по Y начинаются только с Y=557 тайла: http://vec01.maps.yandex.net/tiles?l=map&x=0&y=557&z=19, выше (Y=556 и далее) тайлов просто нет.
Теперь относительно того, что происходит в OpenLayers. Раз мы указали, что проекция тайла у нас EPSG:3395, то для определения сетки он идёт сюда, а потом сюда и пытается вычислить охват по проекции. Но в нашем случае проекция не содержит в себе информации об охвате и OL (видно по коду) в качестве основы сетки выбирает радиус некой нормальной сферы (6370997 м), что отличается от радиуса гуглошарика (6378137 м). Отсюда и все неприятности.
Варианты решения проблемы: либо мы указываем охват для проекции (демо):Либо указываем параметры сетки в описании слоя, (демо):
Вот ещё один пример - наложения Yandex на OSM.
Код: Выделить всё
[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
Код: Выделить всё
[-20037508.34, -19994875.25, 20037508.34, 19994875.25]
Код: Выделить всё
$ echo 20037508.342789244 20037508.342789244 | cs2cs +init=epsg:3857 +to +init=epsg:3395
20037508.34 19994875.25 0.00
Теперь относительно того, что происходит в OpenLayers. Раз мы указали, что проекция тайла у нас EPSG:3395, то для определения сетки он идёт сюда, а потом сюда и пытается вычислить охват по проекции. Но в нашем случае проекция не содержит в себе информации об охвате и OL (видно по коду) в качестве основы сетки выбирает радиус некой нормальной сферы (6370997 м), что отличается от радиуса гуглошарика (6378137 м). Отсюда и все неприятности.
Варианты решения проблемы: либо мы указываем охват для проекции (демо):
Код: Выделить всё
ol.proj.get('EPSG:3395').setExtent(
[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
);
Код: Выделить всё
source: new ol.source.XYZ({
url: 'http://vec01.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}',
projection: 'EPSG:3395',
tileGrid: ol.tilegrid.createXYZ({
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
})
})
- Вложения
-
- yandexOverOSM.png (165.1 КБ) 17352 просмотра
Spatial is now, more than ever, just another column- The Geometry Column.
Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и 33 гостя