如何在openlayers-3中添加Google basemaps？

在openlayers-2中，我们可以添加google基本地图（卫星、物理、混合等）。我需要在openlayer-3中添加google basemaps。如何添加谷歌基本地图

openlayers-3中的代码

map = new ol.Map({
      layers: [
         new ol.layer.Group({
            layers: [
               new ol.layer.Tile({
                  source: null,
                  visible:false
                  }),
                  new ol.layer.Tile({
                  source: new ol.source.MapQuest({layer: 'sat'})
                  }),
                  new ol.layer.Tile({
                  source: new ol.source.OSM(),
                  visible:false
                    })
                 ]})
                ],
                target: 'map',
                view: new ol.View({
                    center:[28.566667, 4.01666699999998],
                    zoom:7
                    }),
                controls: ol.control.defaults({

                       attribution:false

                }).extend([
                    scaleLineControl
                ]),
            });

        lyr=new ol.layer.Tile({  source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/wms',
            params: {'LAYERS': 'test:test', 'TILED': true},
            serverType: 'geoserver'
            })
        });
map.addLayer(lyr);

---

我需要google basemaps，而不是osm和mapquest。

ol3官方不支持google地图，请参见

完全可以这样做，即使它不受支持

下面是一个例子

---

请注意：网站中可用的详细程度与他们的网站中可用的详细程度不一致。他们似乎在面向客户的地图中使用了一些额外的google earth详细信息。

这是一个可行的解决方案，类似于OGC:WMS，但使用google静态API:

var gridSize=512;

getMaxExtent:function(srs){
    var proj= srs? srs : this.getMainProjection();
    var geoExtent= [-180, -85, 180, 85];

    return this.transformExtent(geoExtent, 'EPSG:4326', proj);
},

transform:function(coordinate, srsOrig, srsDest){
    var projOrig= srsOrig? srsOrig : 'EPSG:4326';
    var projDest= srsDest? srsDest : this.getMainProjection();

    return ol.proj.transform(coordinate, projOrig, projDest);
},

getResolutions:function(srs){
    var proj= srs? srs : typterra.serviceHandler.getApplicationTools('ProjectionTools').getMainProjection();
    var defaultTileGrid= ol.proj.get(proj).getDefaultTileGrid();

    if(defaultTileGrid) return defaultTileGrid.getResolutions();
    else return ol.tilegrid.createForProjection(proj).getResolutions();
},


var layer= new ol.layer.Tile({

    source: new ol.source.TileImage({
        attributions:[
            new ol.Attribution({html:'© Google'}),
            new ol.Attribution({html:'Terms of Use.'})
        ];

        tileGrid: new ol.tilegrid.TileGrid({
            extent:getMaxExtent(),
            resolutions:getResolutions(),
            tileSize:[gridSize, gridSize]
        }),

        tileUrlFunction:function(tileCoord, pixelRatio, projection){
            var zoom= tileCoord[0];
            var tileGrid = this.getTileGrid();
            var center=tileGrid.getTileCoordCenter(tileCoord);
            var lat,long;

            center= transform(center, projection, 'EPSG:4326');
            long= new Number(center[0]).toFixed(6);
            lat= new Number(center[1]).toFixed(6);


            return 'http://maps.googleapis.com/maps/api/staticmap?'+
                    'key=yourApiKeyHere&'+
                    'maptype='+model.get('name')+'&'+
                    'size='+gridSize+'x'+gridSize+'&'+
                    'zoom='+zoom+'&'+
                    'center='+lat+','+long
            ;
        }
    })
});

---

请使用ol3谷歌地图库在Openlayers3网站URL中集成谷歌地图：

下面是示例代码。更多详情请参考上述网站

// Create a Google Maps layer
var googleLayer = new olgm.layer.Google();

// Create a regular OL3 map, containing our Google layer
var map = new ol.Map({
    // use OL3-Google-Maps recommended default interactions
    interactions: olgm.interaction.defaults(),
    layers: [
        googleLayer
    ],
target: 'map',
view: new ol.View({
    center: center,
    zoom: 12
    })
});

// Activate the library
var olGM = new olgm.OLGoogleMaps({map: map});
olGM.activate();

---

我正在坐标系WGS84.PseudoMercator EPSG:3857中使用带有OpenLayers v3.17.1的Google地图静态地图API

以下是我的代码：

var gridSize=512;
//Google Terrain
            var gterrain = new ol.layer.Tile({
                preload: Infinity,
                source: new ol.source.TileImage({
                    attributions: [
                      new ol.Attribution({
                          html: '<a href="https://www.google.com/intl/en-GB_US/help/terms_maps.html">Google Map</a>'
                      }),
                      ol.source.OSM.ATTRIBUTION
                    ],
                    tileGrid: new ol.tilegrid.TileGrid({
                        extent:[
                              -13860793.173271,
                              6329131.950797,
                              -13845619.906785,
                              6337107.916410
                        ],
                        resolutions:[156543.03390625, 78271.516953125, 39135.7584765625,
                                  19567.87923828125, 9783.939619140625, 4891.9698095703125,
                                  2445.9849047851562, 1222.9924523925781, 611.4962261962891,
                                  305.74811309814453, 152.87405654907226, 76.43702827453613,
                                  38.218514137268066, 19.109257068634033, 9.554628534317017,
                                  4.777314267158508, 2.388657133579254, 1.194328566789627,
                                  0.5971642833948135, 0.2986, 0.1493],
                        tileSize:[gridSize, gridSize]
                    }),
                    tileUrlFunction:function(tileCoord, pixelRatio, projection){
                        var zoom = tileCoord[0];
                        var tileGrid = this.getTileGrid();
                        var center = ol.proj.transform(ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord)),"EPSG:3857", "EPSG:4326");
                        //console.log(center[0]);
                        //console.log(center[1]);
                        return 'http://maps.googleapis.com/maps/api/staticmap?'+
                'key=YOUR_KEY&'+
                'maptype=terrain&'+
                'size='+gridSize+'x'+gridSize+'&'+
                'zoom='+zoom+'&'+
                'center='+center[1]+','+center[0]
                        ;
                    },
                    maxZoom: 21
                }),
                visible: false,
                name: 'Google Terrain'
            });

var gridSize=512；
//谷歌地形
var gterrain=新ol.layer.Tile({
预加载：无限，
来源：新ol.source.TileImage({
归因：[
新ol.归属({
html:'
}),
ol.source.OSM.attribute
],
tileGrid:新的ol.tileGrid.tileGrid({
范围：[
-13860793.173271,
6329131.950797,
-13845619.906785,
6337107.916410
],
决议：[156543.03390625、78271.516953125、39135.7584765625、，
19567.87923828125, 9783.939619140625, 4891.9698095703125,
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226, 76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135, 0.2986, 0.1493],
tileSize:[gridSize，gridSize]
}),
tileUrlFunction：函数（TileCord、像素比率、投影）{
var zoom=tileCoord[0]；
var tileGrid=this.getTileGrid（）；
var center=ol.proj.transform（ol.extent.getCenter（tileGrid.getTileCoordExtent（tilecord）），“EPSG:3857”，“EPSG:4326”）；
//console.log（中心[0]）；
//控制台日志（中心[1]）；
返回'http://maps.googleapis.com/maps/api/staticmap?'+
'键=您的_键&'+
'地图类型=地形&'+
'size='+gridSize+'x'+gridSize+'&'+
'缩放='+缩放+'&'+
'中心='+中心[1]+'，'+中心[0]
;
},
最大缩放：21
}),
可见：假，
名称：“谷歌地形”
});

---

官方不支持，但您可以使用技巧。

请。示例链接不再有效。

new ol.layer.Tile({source: new ol.source.TileImage({ url: 'http://khm{0-3}.googleapis.com/kh?v=742&hl=pl&&x={x}&y={y}&z={z}' })})