¿Openlayers v4.0.1 admite la API de JavaScript de Google Maps?

10

Quiero saber si la última versión de Openlayers (v4.0.1) es compatible con Google Maps como una capa de mosaico. No puedo encontrar ningún documento sobre esto. Si Openlayers no es compatible con Google Maps, ¿alguien podría decirme si hay alguna forma de hacerlo?

E. Silveira
fuente

Respuestas:

23

Puedo usar Google Maps en OpenLayers 4.2 como este bajo mi capa WMS y está perfectamente equipado con EPSG: 3857 proyección:

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

¿Por qué necesitas un complemento?

Enlace JSFiddle

para hoja de ruta

new ol.layer.Tile({ source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m@113&hl=en&&x={x}&y={y}&z={z}' })})

Si enfrenta el problema ajustado con EPSG: proyección 3857 cuando utiliza Geoserver u otras fuentes vectoriales; usar así

new ol.layer.Tile({
        'title': 'Google Maps Uydu',
        'type': 'base',
         visible: true,
        'opacity': 1.000000,
         source: new ol.source.XYZ({
         attributions: [new ol.Attribution({ html: '<a href=""></a>' })],
         url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga'
         })
}),
Ömür Bilgili
fuente
¡Increíble! Después de buscar en Google toda la primera mitad del día, ¡esta es la mejor solución que me ahorró mucho trabajo! :)
AME
1
Esto muestra la vista satelital, ¿cómo puedo mostrar la vista predeterminada que se carga en el mapa de Google?
BiJ
¿Vista predeterminada de @BiJ? hoja de ruta o híbrido? Agregué un mosaico de vista de hoja de ruta para definir esta respuesta.
Ömür Bilgili
Hola, ya no funciona (404) ¿tienes una solución?
Alexandre Mélard
1
Hola, @ AlexandreMélard
Actualicé
7

Es posible para nosotros ol.source.Azulejo para acceder a todos los mapas de google. Para todos los que lo necesitan, este es el código básico para crear cada capa de Google Maps disponible para agregar a un mapa desarrollado en Openlayers 4:

var googleLayerRoadNames=new ol.layer.Tile({
    title: "Google Road Names",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}' }),
});

var googleLayerRoadmap=new ol.layer.Tile({
    title: "Google Road Map",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
});

var googleLayerSatellite =new ol.layer.Tile({
    title: "Google Satellite",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
});

var googleLayerHybrid =new ol.layer.Tile({
    title: "Google Satellite & Roads",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}' }),
});

var googleLayerTerrain =new ol.layer.Tile({
    title: "Google Terrain",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}' }),
});

var googleLayerHybrid2 =new ol.layer.Tile({
    title: "Google Terrain & Roads",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}' }),
}); 

var googleLayerOnlyRoad=new ol.layer.Tile({
    title: "Google Road without Building",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}' }),
});
Alessandro Battistini
fuente
3
Tenga cuidado si planea usar esto; es una violación directa de los términos de servicio de Google Maps y es probable que tenga problemas.
Alex McMillan
¿Qué pasa con la capa de tráfico
Saroj
De acuerdo con esta página blinktag.com/google-transit-layer-through-google-maps-api para la capa de tráfico, puede usar esta url: mt1.google.com/vt/… ... Pero, como señaló Alex McMillan, El uso de Google Maps dentro de una biblioteca que no es de Google es una violación del término de servicio.
Alessandro Battistini
5

No, no lo hace, y probablemente nunca lo admitirá, ya que no hay acceso directo a los mosaicos con GMaps. La única opción que conozco sigue siendo algo así como: https://github.com/mapgears/ol3-google-maps

Bartvde
fuente
1
No pude obtener, cuál es el problema aquí, Ömür Bilgili ya dio el código de muestra que funciona bien.
Atul Sureka
2
Funciona pero es una violación de sus términos de servicio.
bartvde
3

Ya he respondido aquí: https://stackoverflow.com/a/42616386/6068293 ¿ podría comentar si eso es lo que está buscando?

La creación de una solución para los datos del mapa simple necesitaría combinar la comprensión de los datos descargados por tales solicitudes: https://www.google.pl/maps/vt/stream/pb=!1m7!8m6!1m3!1i11!2i348 , $ 13.00. + Stany + Zjednoczone! 4m2! 3d34.0522342! 4d-118.24368489999999! 5e1! 6b1! 9e0! 11e1! 13m10! 2shplexp% 2Ca! 15b1! 18m3! 5b0! 6b0! 8b0! 22m3! 6e2! 7e3! ! 19u11! 19u12! 19u14! 19u20! 20m1! 1e6! 3m8! 2spl! 3spl! 5e1105! 12m4! 1e68! 2m2! 1sset! 2sRoadmap! 4e1! 6m6! 1e12! 2i2! 28e3! 39b1! 44e2! 50e0 & auth

La creación de datos en la memoria del navegador: /superuser/948738/what-is-the-blobhttp-prefix-and-where-can-i-learn-more-about-this y recuperando mosaicos de datos BLOB puestos en el navegador

Michał Okulewicz
fuente
Un pensamiento más sobre el tema. Los mosaicos están disponibles en las siguientes direcciones: maps.google.com/maps/… que han sido utilizados por una versión anterior de OpenLayers y la API de GoogleMaps. El único problema es descubrir el significado del parámetro pb ...
Michał Okulewicz
Todavía no conozco todo el argumento pb, pero X, Y y ZOOM del mosaico se colocan como se indica a continuación:! 1m5! 1m4! 1i {ZOOM}! 2i {X}! 3i {Y}! 4i256! 2m3! 1e0! 2sm! 3i3175062737! 3m9! 2spl! 3sUS! 5e18! 12m1! 1e47! 12m3! 1e37! 2m1! 1ssmartmaps! 4e0
Michał Okulewicz
1
Dudo que este sea un enfoque legal
bartvde
3
No lo sabía, pero @bartvde tiene razón: no hay acceso a las API o al contenido, excepto a través del Servicio
Michał Okulewicz
1

Hay una manera de incluir mapas de Google en capas abiertas. Puedes copiar mi código. (Mecanografiado)


import {Layer} from './../abstract-layer';
import {Injectable} from '@angular/core';

declare var ol: any; declare var window: any;

@Injectable() export class GoogleLayers extends Layer { private layers = []; private language = 'en'; private country = 'US';

constructor() { super(); var me = this; let layerRoad = new ol.layer.Tile({ visible: false, preload: Infinity, source: new ol.source.TileImage({ wrapX: true, maxZoom: 19, url: `http://maps.google.de/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2s${this.language}!3s${this.country.toUpperCase()}!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0` }) }); layerRoad.displayName = 'Google Maps Road'; let layerSatelliet = new ol.layer.Tile({ visible: false, preload: Infinity, source: new ol.source.TileImage({ maxZoom: 19, wrapX: true, url: `https://www.google.de/maps/vt/pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m2!1e1!3i762!3m9!2s${this.language}!3s${this.country.toUpperCase()}!5e1105!12m1!1e4!12m1!1e47!12m1!1e3!4e0!5m1!1e0` }) }); layerSatelliet.displayName = 'Google Maps Satellit'; this.layers.push(layerRoad); this.layers.push(layerSatelliet); } getLayers() { return this.layers; } }

ingrese la descripción de la imagen aquí

mad2man
fuente
-1

Openlayers ha dejado de admitir mapas de Google desde la versión 3 en adelante. Intenta usar el folleto en lugar de Openlayers. Que es ligero y tiene la mayoría de las características de Openlayers. Si falta algo, puede agregarlo fácilmente como un complemento. Agregar Google Maps usando ol.layer. El mosaico va en contra de los acuerdos de licencia de Google.

George John
fuente