Страница 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
	});
Прилагаю скриншоты до и после:
OSM.jpeg
OpenStreetMap
OSM.jpeg (65.6 КБ) 18786 просмотров
YandexError.jpeg
YandexMap без подключения proj4js
YandexError.jpeg (120.33 КБ) 18786 просмотров
YandexCorr.jpeg
Корректное отображение YandexMap
YandexCorr.jpeg (56.84 КБ) 18786 просмотров

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.