ओपनलेयर -3 में Google बेसमैप कैसे जोड़ें?

Question

ओपनलेयर -2 में, हम Google बेसमैप्स (उपग्रह, भौतिक, संकर, आदि) जोड़ सकते हैं। मुझे ओपनलेयर -3 में Google बेसमैप जोड़ने की ज़रूरत है। मैं Google बेसमैप कैसे जोड़ सकता हूं ???

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 के बजाय basemaps गूगल की जरूरत में कोड।

Answer 1

गूगल मैप्स आधिकारिक तौर पर ol3 द्वारा समर्थित नहीं है, को देखने के https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4

Answer 2

यह यह करने के लिए पूरी तरह से संभव है, भले ही यह समर्थित नहीं है।

यहाँ integrating google maps with openlayers 3 का एक उदाहरण है।

ध्यान रखें: वेबसाइट में उपलब्ध विस्तार का स्तर उनके Google Maps API के माध्यम से उपलब्ध जानकारी के स्तर से मेल नहीं खाता है। वे अपने ग्राहक के नक्शे में कुछ अतिरिक्त Google धरती के विवरण का उपयोग कर रहे हैं।

Answer 3

यह OGC की तरह एक posible के समाधान है: WMS लेकिन का उपयोग करके Google स्थिर एपीआई:

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

में Openlayers3 साइट यूआरएल गूगल मैप्स एकीकृत करने के लिए ol3-google-नक्शे पुस्तकालय का उपयोग करें: http://mapgears.github.io/ol3-google-maps/

नीचे है नमूना कोड। 3857: अधिक जानकारी के लिए कृपया ऊपर उल्लेख साइट

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

मैं OpenLayers साथ गूगल मानचित्र स्टेटिक मानचित्र एपीआई का उपयोग कर रहा v3.17.1 में समन्वय प्रणाली WGS84.PseudoMercator EPSG देखें।

यहाँ मेरी कोड लग रहा है जैसे:

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

आधिकारिक तौर पर समर्थित नहीं है, लेकिन आप एक चाल के साथ उपयोग कर सकते हैं।