Страница 1 из 1

OpenLayers 3 + YandexMap

Добавлено: 16 сен 2015, 16:46
Warden
Здравствуйте! Такой вопрос, как можно подключить к openLayers3 слой с картами Yandex?

Re: OpenLayers 3 + YandexMap

Добавлено: 25 сен 2015, 15:34
Warden
Для тех кто может быть столкнется с такой проблемой, как смещение координат при подключение YandexMap.
Исправить это можно, подключив библиотеку 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
	});
Прилагаю скриншоты до и после:
OpenStreetMap
OpenStreetMap
OSM.jpeg (65.6 КБ) 21394 просмотра
YandexMap без подключения proj4js
YandexMap без подключения proj4js
YandexError.jpeg (120.33 КБ) 21394 просмотра
Корректное отображение YandexMap
Корректное отображение YandexMap
YandexCorr.jpeg (56.84 КБ) 21394 просмотра

Re: OpenLayers 3 + YandexMap

Добавлено: 28 сен 2015, 10:57
Филиппов Владислав
а какой источник (ol.source) и какие параметры (улр....) вы используете для Яндекса?

Re: OpenLayers 3 + YandexMap

Добавлено: 28 сен 2015, 14:28
Warden

Код: Выделить всё

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}'
		})
	});
Первый слой, схема карта, второй слой спутниковые данные.

Re: OpenLayers 3 + YandexMap

Добавлено: 26 фев 2016, 10:03
AlexSek
Добавлю в эту ветку тк вроде по теме, вроде все сделал по инструкции а смещение никуда не делось, что не так?

Код: Выделить всё

<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>

Re: OpenLayers 3 + YandexMap

Добавлено: 01 мар 2016, 10:51
Warden
AlexSek писал(а):Добавлю в эту ветку тк вроде по теме, вроде все сделал по инструкции а смещение никуда не делось, что не так?
Как то подробнее хотелось бы узнать. Насколько большое смещение? Яндекс карты даже между собой имеют небольшое смещение https://yandex.ru/blog/mapsapi/36655, а что уж тут говорить относительно других, там итак подавно. Если смещение большое, то это скорее всего что у вас проекция второго слоя Googleское, я использовал EPSG:3857 или EPSG:4326, уже не помню точно.

Re: OpenLayers 3 + YandexMap

Добавлено: 20 окт 2016, 08:57
Denis Rykov
Тоже возникли проблемы с Yandex Map. Пытаюсь отобразить точку с известными координатами, OpenLayers трансформирует их правильно, а вот сама подложка почему-то смещена, пример.

Re: OpenLayers 3 + YandexMap

Добавлено: 20 окт 2016, 10:07
gornak
Denis Rykov писал(а):Тоже возникли проблемы с Yandex Map.
тоже мучился, перепробовал всякие варианты- в результате перешел на leaflet, там нет смещения

Re: OpenLayers 3 + YandexMap

Добавлено: 20 окт 2016, 18:34
Denis Rykov
Совместными усилиями разобрались. Вообщем получается так, что для того, чтобы отобразить подложку Yandex-а недостаточно одного лишь описания проекции EPSG:3395. Оказывается, Yandex использует тайловую сетку такую же как OpenStreetmap, а именно:

Код: Выделить всё

[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
То есть сетка натянута на гуглошарик (сфера, используемая в проекции EPSG:3857), а не на эллипсоид. Я почему-то думал, что раз проекция EPSG:3395, то и сетка будет:

Код: Выделить всё

[-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
То есть я ошибочно предполагал, что координаты верхнего левого угла верхнего левого тайла (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 м). Отсюда и все неприятности.

Варианты решения проблемы: либо мы указываем охват для проекции (демо):

Код: Выделить всё

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]
  })
})
Вот ещё один пример - наложения Yandex на OSM.