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?

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

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

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


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

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


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.