Openlayers v4.0.1 supporte-t-il l'API Javascript de Google Maps?


10

Je veux savoir si la dernière version d'Openlayers (v4.0.1) prend en charge Google Maps en tant que couche de tuiles. Je ne trouve aucun document à ce sujet. Si Openlayers ne prend pas en charge Google Maps, quelqu'un pourrait-il me dire s'il existe un moyen de le faire?

Réponses:


23

Je peux utiliser Google Maps dans OpenLayers 4.2 comme ceci sous ma couche WMS et sa projection parfaitement équipée avec 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}' })})

Pourquoi avez-vous besoin d'un plugin?

Lien JSFiddle

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

Si vous rencontrez le problème ajusté avec la projection EPSG: 3857 lorsque vous utilisez Geoserver ou d'autres sources vectorielles; utiliser comme ça

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

Impressionnant! Après avoir googlé toute la première moitié de la journée, c'est la meilleure solution qui m'a fait économiser beaucoup de travail! :)
AME

1
Cela montre la vue satellite, comment puis-je afficher la vue par défaut qui se charge sur google map?
BiJ

Vue par défaut @BiJ? feuille de route ou hybride? J'ai ajouté une vignette de feuille de route pour définir cette réponse.
Ömür Bilgili

Salut, ça ne marche plus (404) avez-vous une solution?
Alexandre Mélard

1
Salut @ AlexandreMélard J'ai mis à jour cet exemple de code et son travail parfaitement, jsfiddle.net/omurbilgili/eyytw0gc/569
Ömür Bilgili

7

Il nous est possible ol.source.Tile d'accéder à toutes les cartes google. Pour tout le monde en a besoin, voici le code de base pour créer chaque couche google maps disponible à ajouter à une carte développée dans 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
Soyez prudent si vous prévoyez de l'utiliser; il s'agit d'une violation directe des conditions d'utilisation de Google Maps et vous aurez probablement des ennuis.
Alex McMillan

Qu'en est-il de la couche de trafic
Saroj

Selon cette page blinktag.com/google-transit-layer-through-google-maps-api pour la couche de trafic, vous pouvez utiliser cette URL: mt1.google.com/vt/… ... Mais, comme l'a noté Alex McMillan, l'utilisation de google maps dans une bibliothèque autre que google constitue une violation des conditions d'utilisation.
Alessandro Battistini

5

Non, ce n'est pas le cas, et il ne le supportera probablement jamais, car il n'y a pas d'accès direct aux tuiles avec GMaps. La seule option que je connaisse est toujours quelque chose comme: https://github.com/mapgears/ol3-google-maps


1
Je n'ai pas pu obtenir, quel est le problème ici, Ömür Bilgili a déjà donné l'exemple de code qui fonctionne bien.
Atul Sureka

2
Cela fonctionne, mais c'est une violation de leurs conditions d'utilisation.
bartvde

3

Encore une réflexion sur le sujet. Les vignettes sont disponibles aux adresses suivantes: maps.google.com/maps/… qui ont été utilisées par une version précédente d'OpenLayers et de l'API GoogleMaps elle-même. Le seul problème est de trouver la signification du paramètre pb ...
Michał Okulewicz

Je ne connais toujours pas l'argument pb entier, mais X, Y et ZOOM de la tuile sont placés comme indiqué ci-dessous:! 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
Je doute que ce soit une approche juridique
bartvde

3
Je n'étais pas au courant, mais @bartvde a raison: aucun accès aux API ou au contenu sauf via le service
Michał Okulewicz

1

Il existe un moyen d'inclure google maps aux openlayers. Vous pouvez copier mon code. (Manuscrit)


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

entrez la description de l'image ici


-1

Openlayers a cessé de prendre en charge Google maps à partir de la version 3. Essayez d'utiliser le dépliant au lieu d'Openlayers. Ce qui est léger et possède la plupart des fonctionnalités d'Openlayers. Si quelque chose manque, vous pouvez facilement l'ajouter en tant que plugin.Ajout de Google Maps à l'aide de ol.layer.Tile est contraire aux accords de licence Google.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.