Jak dodać mapy bazowe Google w openlayers-3?

Question

W openlayers-2 możemy dodać mapy bazowe google (satelitarne, fizyczne, hybrydowe itp.). Muszę dodać mapy bazowe google w openlayer-3. Jak mogę dodać mapy bazowe google ???

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

trzeba google basemaps zamiast OSM i mapquest.

Answer 1

Google Maps jest oficjalnie nie poparte OL3 patrz https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4

Answer 2

jest to całkowicie możliwe, aby to zrobić, mimo że nie jest obsługiwane.

Oto przykład integrating google maps with openlayers 3.

należy pamiętać: poziom szczegółowości dostępny na stronie internetowej Google Maps nie odpowiada poziomowi szczegółowości dostępnemu poprzez ich Google Maps API. Wydaje się, że używają dodatkowych informacji o ziemi na swoich mapach dla klientów.

Answer 3

Jest to posible rozwiązanie jak OGC: WMS, ale przy użyciu Google Static 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

Proszę używać biblioteki OL3-google-maps do integracji z Google Maps w adresie URL Openlayers3 strony: http://mapgears.github.io/ol3-google-maps/

Poniżej przykładowy kod. Więcej szczegółów można znaleźć wyżej wymienionych kempingowe

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

Używam API Map Google Static mapa z OpenLayers v3.17.1 w układzie współrzędnych WGS84.PseudoMercator EPSG: 3857.

Tu jest mój kod wygląda następująco:

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

Nieobsługiwane oficjalnie ale można skorzystać z trick.