Os Openlayers v4.0.1 oferecem suporte à API Javascript do Google Maps?

10

Quero saber se a versão mais recente do Openlayers (v4.0.1) suporta o Google Maps como uma camada de mosaico. Não consigo encontrar nenhum documento sobre isso. Se o Openlayers não suportar o Google Maps, alguém poderia me dizer se existe alguma maneira de fazer isso?

E. Silveira
fonte

Respostas:

23

Posso usar o Google Maps no OpenLayers 4.2 como este na minha camada WMS e está perfeitamente equipado com a projeção EPSG: 3857:

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 que você precisa de um plugin?

Link JSFiddle

para ROADMAP

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

Se você enfrentar o problema ajustado com a projeção EPSG: 3857 ao usar o Geoserver ou outras fontes de vetores; use assim

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
fonte
Impressionante! Depois de pesquisar toda a primeira metade do dia no Google, esta é a melhor solução que me salvou muito trabalho! :)
AME
1
Isso mostra a visualização por satélite. Como posso mostrar a visualização padrão carregada no google map?
28418 BiJ
@BiJ visualização padrão? roteiro ou híbrido? Adicionei o bloco de visualização do roteiro para definir esta resposta.
Ömür Bilgili
Olá, não está mais funcionando (404) você tem uma solução alternativa?
Alexandre Mélard 15/10
1
Oi @ AlexandreMélard eu atualizei este exemplo de código e seu trabalho perfeitamente, jsfiddle.net/omurbilgili/eyytw0gc/569
Ömür Bilgili
7

É possível para nós ol.source.Tile acessar todos os mapas do Google. Para todo mundo precisar, esse é o código básico para criar todas as camadas disponíveis do Google Maps e adicionar a um mapa desenvolvido no 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
fonte
3
Tenha cuidado se você planeja usar isso; é uma violação direta dos termos de serviço do Google Maps e você provavelmente terá problemas.
Alex McMillan
que sobre camada de tráfego
Saroj
De acordo com esta página blinktag.com/google-transit-layer-through-google-maps-api para a camada de tráfego, você pode usar este URL: mt1.google.com/vt/… ... Mas, como observado por Alex McMillan, o uso do google maps em uma biblioteca que não seja do google é uma violação do termo de serviço.
Alessandro Battistini
5

Não, não é, e provavelmente nunca será compatível, já que não há acesso direto aos blocos com o GMaps. A única opção que conheço ainda é algo como: https://github.com/mapgears/ol3-google-maps

Bartvde
fonte
1
Não consegui entender, qual é o problema aqui, Ömür Bilgili já deu o código de exemplo que funciona bem.
Atul Sureka 27/11
2
Funciona, mas é uma violação dos termos de serviço.
bartvde
3

Já dei uma resposta aqui: https://stackoverflow.com/a/42616386/6068293 você poderia comentar se é isso que você está procurando?

A criação de uma solução para os dados simples do mapa precisaria combinar o entendimento dos dados baixados por essas solicitações: https://www.google.pl/maps/vt/stream/pb=!1m7!8m6!1m3!1i11!2i348 ! 3i816! 2i4! 3x65535! 2m3! 1e0! 2sm! 3i375060690! 2m38! 1e2! 2sspotlight! 4m2! 1sgid! 2sXMf6EbH1C4DOnd6foX0POg! 8m32! 2m1! 20m1! + 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!

A criação de dados na memória do navegador: /superuser/948738/what-is-the-blobhttp-prefix-and-where-can-i-learn-more-about-this e recuperando blocos de dados BLOB colocados no navegador

Michał Okulewicz
fonte
Mais um pensamento sobre o assunto. Os blocos estão disponíveis nos seguintes endereços: maps.google.com/maps/… que foram utilizados por uma versão anterior do OpenLayers e da própria API do GoogleMaps. O único problema é descobrir o significado do parâmetro pb ...
Michał Okulewicz 11/03
Ainda não conheço todo o argumento pb, mas X, Y e ZOOM do bloco são colocados como marcados abaixo:! 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
Eu duvido que esta é uma abordagem jurídica
bartvde
3
Eu não ter tido conhecimento, mas @bartvde está certo: Sem acesso a APIs ou conteúdo, exceto através do Serviço
Michał Okulewicz
1

Existe uma maneira de incluir o google maps nos openlayers. Você pode copiar meu código. (TypeScript)


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

insira a descrição da imagem aqui

mad2man
fonte
-1

O Openlayers parou de suportar o Google Maps a partir da versão 3. Tente usar o folheto em vez dos Openlayers. O que é leve e possui a maioria dos recursos dos Openlayers. Se algo estiver faltando, você poderá adicioná-lo facilmente como um plugin.Adicionar o Google Maps usando ol.layer.Tile é contra os contratos de licença do Google.

George John
fonte