Question

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

openlayers-3中的CODE

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。

Answer 1

ol3不支持Google地图正式，请参阅https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4

Answer 2

尽管它不受支持，但完全有可能做到这一点。

这里是integrating google maps with openlayers 3的一个例子。

请注意：Google Maps网站中提供的详细信息级别与Google Maps API中可用的详细信息水平不符。他们似乎在面向客户的地图中使用了一些额外的谷歌地球细节。

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

Answer 4

请使用ol3-google-maps库在Openlayers3网站网址中整合Google地图：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();

Answer 5

我在坐标系WGS84.PseudoMercator EPSG：3857中使用带有OpenLayers v3.17.1的Google Map Static Map 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'
            });

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

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

如何在openlayers-3中添加Google底图？

6 个答案: