Openlayers v4.0.1 unterstützen die Google Maps Javascript API?


10

Ich möchte wissen, ob die neueste Version von Openlayers (v4.0.1) Google Maps als Kachelebene unterstützt. Ich kann dazu kein Dokument finden. Wenn Openlayers Google Maps nicht unterstützt, kann mir jemand sagen, ob es eine Möglichkeit gibt, dies zu tun?

Antworten:


23

Ich kann Google Maps in OpenLayers 4.2 wie folgt unter meiner WMS-Ebene verwenden und es ist perfekt mit der EPSG: 3857-Projektion ausgestattet:

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

Warum brauchst du ein Plugin?

JSFiddle- Link

für 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}' })})

Wenn Sie bei Verwendung von Geoserver oder anderen Vektorquellen auf das angepasste Problem mit der EPSG: 3857-Projektion stoßen; benutze so

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

Genial! Nachdem ich die gesamte erste Hälfte des Tages gegoogelt habe, ist dies die beste Lösung, die mir viel Arbeit erspart hat! :)
AME

1
Dies zeigt die Satellitenansicht. Wie kann ich die Standardansicht anzeigen, die auf Google Map geladen wird?
BiJ

@BiJ Standardansicht? Roadmap oder Hybrid? Ich habe eine Roadmap-Ansichtskachel hinzugefügt, um diese Antwort zu definieren.
Ömür Bilgili

Hallo, es funktioniert nicht mehr (404). Haben Sie eine Problemumgehung?
Alexandre Mélard

1
Hallo @ AlexandreMélard Ich aktualisiert , um dieses Codebeispiel und seine Arbeit perfekt, jsfiddle.net/omurbilgili/eyytw0gc/569
Ömür Bilgili

7

Es ist uns ol.source.Tile möglich, auf alle Google Maps zuzugreifen. Für alle, die es benötigen, ist dies der grundlegende Code zum Erstellen aller verfügbaren Google Maps-Ebenen, die einer in Openlayers 4 entwickelten Karte hinzugefügt werden sollen:

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
Seien Sie vorsichtig, wenn Sie dies verwenden möchten. Dies stellt einen direkten Verstoß gegen die Nutzungsbedingungen von Google Maps dar und Sie werden wahrscheinlich in Schwierigkeiten geraten.
Alex McMillan

Was ist mit Verkehrsschicht
Saroj

Laut dieser Seite blinktag.com/google-transit-layer-through-google-maps-api für die Verkehrsschicht können Sie diese URL verwenden: mt1.google.com/vt/… ... Aber, wie von Alex McMillan bemerkt, Die Verwendung von Google Maps in einer nicht von Google stammenden Bibliothek verstößt gegen die Nutzungsbedingungen.
Alessandro Battistini

5

Nein, das tut es nicht, und es wird es wahrscheinlich nie unterstützen, da es mit GMaps keinen direkten Zugriff auf Kacheln gibt. Die einzige Option, die ich kenne, ist noch so etwas wie: https://github.com/mapgears/ol3-google-maps


1
Ich konnte nicht verstehen, worum es hier geht, Ömür Bilgili hat bereits den Beispielcode gegeben, der gut funktioniert.
Atul Sureka

2
Es funktioniert, aber es ist ein Verstoß gegen die Nutzungsbedingungen.
Bartvde

3

Noch ein Gedanke zu diesem Thema. Kacheln sind unter folgenden Adressen verfügbar: maps.google.com/maps/…, die von einer früheren Version von OpenLayers und der GoogleMaps-API selbst verwendet wurden. Das einzige Problem ist, die Bedeutung des pb-Parameters herauszufinden ...
Michał Okulewicz

Ich kenne immer noch nicht das gesamte pb-Argument, aber X, Y und ZOOM der Kachel sind wie folgt markiert :! 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
Ich bezweifle, dass dies ein rechtlicher Ansatz ist
Bartvde

3
Ich war mir nicht bewusst, aber @bartvde hat Recht: Kein Zugriff auf APIs oder Inhalte außer über den Service
Michał Okulewicz

1

Es gibt eine Möglichkeit, OpenLayer mit Google Maps zu versehen. Sie können meinen Code kopieren. (Typoskript)


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

Geben Sie hier die Bildbeschreibung ein


-1

Openlayers unterstützt Google Maps ab Version 3 nicht mehr. Versuchen Sie, anstelle von Openlayern eine Broschüre zu verwenden. Welches ist leicht und hat die meisten Funktionen von Openlayern. Wenn etwas fehlt, können Sie es einfach als Plugin hinzufügen. Das Hinzufügen von Google Maps mit ol.layer.Tile verstößt gegen Google-Lizenzvereinbarungen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.