如何在 openlayers-3 中添加谷歌底图？答案

【问题标题】：How to add Google basemaps in openlayers-3?如何在 openlayers-3 中添加谷歌底图？
【发布时间】：2015-02-26 09:06:45
【问题描述】：

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

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

我需要谷歌底图而不是 osm 和 mapquest。

【问题讨论】：

What have you tried so far? 请show us your code。

标签： openlayers openlayers-3

【解决方案1】：

Google Maps 官方不被 ol3 支持，见https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4

【讨论】：

【解决方案2】：

完全有可能做到这一点，即使它不受支持。

这是integrating google maps with openlayers 3 的示例。

请注意：Google Maps 网站提供的详细程度与通过其Google Maps API 提供的详细程度不对应。他们似乎在面向客户的地图中使用了一些额外的谷歌地球细节。

【讨论】：

示例链接不再有效。

【解决方案3】：

这是一个类似于 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
            ;
        }
    })
});

【讨论】：

【解决方案4】：

我在坐标系 WGS84.PseudoMercator EPSG:3857 中使用 Google Map Static Map API 和 OpenLayers v3.17.1。

我的代码如下：

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'
            });

【讨论】：

【解决方案5】：

请使用 ol3-google-maps 库将 Google 地图集成到 Openlayers3 站点 URL：http://mapgears.github.io/ol3-google-maps/

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

// 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();

【讨论】：

【解决方案6】：

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}' })})

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

【讨论】：