OpenLayers3. Как добавить базовые слои Google Maps.


При работе с OpenLayers — первоочередная задача указать базовый слой. OSM, которые предлагается по умолчанию — редко удовлетворяет требованиям — поэтому в этой статье пример создания базовых слоёв с GoogleMaps.

layers: [
            new ol.layer.Tile({
                id: 'l0',
                title: " Google Road Names",
                type: 'base',
                visible: ( baseLayer == 'l0' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}' }),
            }),
            new ol.layer.Tile({
                id: 'l1',
                title: " Google Road Map",
                type: 'base',
                visible: ( baseLayer == 'l1' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
            }),
            new ol.layer.Tile({
                id: 'l2',
                title: " Google Satellite",
                type: 'base',
                visible: ( baseLayer == 'l2' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
            }),
            new ol.layer.Tile({
                id: 'l3',
                title: " Google Satellite & Roads",
                type: 'base',
                visible: ( baseLayer == 'l3' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}' }),
            }),
            new ol.layer.Tile({
                id: 'l4',
                title: " Google Terrain",
                type: 'base',
                visible: ( baseLayer == 'l4' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}' }),
            }),
            new ol.layer.Tile({
                id: 'l5',
                title: " Google Terrain & Roads",
                type: 'base',
                visible: ( baseLayer == 'l5' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}' }),
            }),
            new ol.layer.Tile({
                id: 'l6',
                title: " Google Road without Building",
                type: 'base',
                visible: ( baseLayer == 'l6' ),
                source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}' }),
            })
        ]

В принципе по примеру всё должно быть ясно — описание слоёв — в поле title.

Чем отличаются sourc-ы — можно посмотреть здесь.

, ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *