OpenLayers 3 + YandexMap

Mapserver, GeoServer, MapGuide, Google и другое ПО для веб-картографии
Ответить
Warden
Интересующийся
Сообщения: 25
Зарегистрирован: 16 сен 2015, 16:43
Репутация: 7
Откуда: Королёв

OpenLayers 3 + YandexMap

Сообщение Warden » 16 сен 2015, 16:46

Здравствуйте! Такой вопрос, как можно подключить к openLayers3 слой с картами Yandex?

Warden
Интересующийся
Сообщения: 25
Зарегистрирован: 16 сен 2015, 16:43
Репутация: 7
Откуда: Королёв

Re: OpenLayers 3 + YandexMap

Сообщение Warden » 25 сен 2015, 15:34

Для тех кто может быть столкнется с такой проблемой, как смещение координат при подключение 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 КБ) 4071 просмотр
YandexError.jpeg
YandexMap без подключения proj4js
YandexError.jpeg (120.33 КБ) 4071 просмотр
YandexCorr.jpeg
Корректное отображение YandexMap
YandexCorr.jpeg (56.84 КБ) 4071 просмотр

Аватара пользователя
Филиппов Владислав
Гуру
Сообщения: 952
Зарегистрирован: 17 фев 2006, 06:28
Проекты: 1
Репутация: 130
Ваше звание: Геннадич
Откуда: Новосибирск
Контактная информация:

Re: OpenLayers 3 + YandexMap

Сообщение Филиппов Владислав » 28 сен 2015, 10:57

а какой источник (ol.source) и какие параметры (улр....) вы используете для Яндекса?

Warden
Интересующийся
Сообщения: 25
Зарегистрирован: 16 сен 2015, 16:43
Репутация: 7
Откуда: Королёв

Re: OpenLayers 3 + YandexMap

Сообщение Warden » 28 сен 2015, 14:28

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

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
Интересующийся
Сообщения: 17
Зарегистрирован: 12 апр 2010, 20:23
Репутация: -1
Контактная информация:

Re: OpenLayers 3 + YandexMap

Сообщение AlexSek » 26 фев 2016, 10:03

Добавлю в эту ветку тк вроде по теме, вроде все сделал по инструкции а смещение никуда не делось, что не так?

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

<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>
Пишу красиво и грамотно...

Warden
Интересующийся
Сообщения: 25
Зарегистрирован: 16 сен 2015, 16:43
Репутация: 7
Откуда: Королёв

Re: OpenLayers 3 + YandexMap

Сообщение Warden » 01 мар 2016, 10:51

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

Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3315
Зарегистрирован: 11 апр 2008, 21:09
Статьи: 33
Проекты: 9
Репутация: 492
Ваше звание: Author
Контактная информация:

Re: OpenLayers 3 + YandexMap

Сообщение Denis Rykov » 20 окт 2016, 08:57

Тоже возникли проблемы с Yandex Map. Пытаюсь отобразить точку с известными координатами, OpenLayers трансформирует их правильно, а вот сама подложка почему-то смещена, пример.
Spatial is now, more than ever, just another column- The Geometry Column.

gornak
Активный участник
Сообщения: 134
Зарегистрирован: 30 авг 2015, 16:38
Репутация: 24
Контактная информация:

Re: OpenLayers 3 + YandexMap

Сообщение gornak » 20 окт 2016, 10:07

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

Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3315
Зарегистрирован: 11 апр 2008, 21:09
Статьи: 33
Проекты: 9
Репутация: 492
Ваше звание: Author
Контактная информация:

Re: OpenLayers 3 + YandexMap

Сообщение Denis Rykov » 20 окт 2016, 18:34

Совместными усилиями разобрались. Вообщем получается так, что для того, чтобы отобразить подложку 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.
Вложения
yandexOverOSM.png
yandexOverOSM.png (165.1 КБ) 2522 просмотра
Spatial is now, more than ever, just another column- The Geometry Column.

Ответить

Вернуться в «Веб-картография»