Come aggiungere Google basemaps in openlayers-3?

Question

In openlayers-2, possiamo aggiungere google basemaps (satellite, fisico, ibrido, ecc.). Devo aggiungere google basemaps in openlayer-3. Come posso aggiungere google basemaps ???

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

ho bisogno di google mappe di base, invece di OSM e MapQuest.

Answer 1

Google Maps è ufficialmente non supportato da OL3, vedi https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4

Answer 2

è del tutto possibile farlo, anche se non è supportato.

Ecco un esempio di integrating google maps with openlayers 3.

Attenzione: il livello di dettaglio disponibile nel sito Web Google Maps non corrisponde al livello di dettaglio disponibile tramite il loro Google Maps API. sembrano utilizzare alcuni dettagli extra di Google Earth nelle mappe dei loro clienti.

Answer 3

Si tratta di una soluzione di posible come OGC: WMS ma utilizzando Google API statica:

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

Utilizzare libreria OL3-google-maps per l'integrazione di Google Maps in URL Openlayers3 sito: http://mapgears.github.io/ol3-google-maps/

Di seguito il codice di esempio. Maggiori dettagli si prega di consultare il sito di cui sopra

// 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

Sto usando l'API di Google Map Static Map con OpenLayers v3.17.1 nel sistema di coordinate WGS84.PseudoMercator EPSG: 3857.

Ecco il mio codice è simile:

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

Non supportato ufficialmente, ma è possibile utilizzare con un trucco.