Openlayers v4.0.1 desteği Google Maps Javascript API?

Openlayers’ın (v4.0.1) en son sürümünün Google Maps’i Döşeme Katmanı olarak destekleyip desteklemediğini bilmek istiyorum. Bununla ilgili herhangi bir belge iyonu bulamıyorum. Openlayers Google Haritalar’ı desteklemiyorsa, birisi bunu yapmanın bir yolu olup olmadığını söyleyebilir mi?

5

6 cevap

WMS katmanımın altında bunun gibi OpenLayers 4.2’de Google Maps’i kullanabilirim ve EPSG: 3857 projeksiyon ile mükemmel bir şekilde donatıldı:

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

Neden bir eklentiye ihtiyacınız var?

JSFiddle link

ROADMAP için

new ol.layer.Tile({ source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/[email protected]&hl=en&&x={x}&y={y}&z={z}' })})

Geoserver veya diğer vektör kaynaklarını kullanırken, EPSG: 3857 projeksiyonu ile ilgili problemle karşılaşırsanız; böyle kullan

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: '' })],
         url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga'
         })
}),
17
katma
@BiJ varsayılan görünüm? yol haritası mı yoksa hibrit mi? Bu cevabı tanımlamak için yol haritası görünümü döşemesi ekledim.
katma yazar user103570, kaynak
Korku veren! Günün ilk yarısını googling yaptıktan sonra, bu bana çok fazla iş kazandıran en iyi çözüm! :)
katma yazar Florents Tselai, kaynak
Bu, uydu görünümünü gösterir, Google haritaya yüklenen varsayılan görünümü nasıl gösterebilirim?
katma yazar lemon, kaynak

No it doesn't, and it will probably never support it, since there is no direct tiles access with GMaps. The only option that I know of is still something like: https://github.com/mapgears/ol3-google-maps

4
katma
Çalışıyor ama hizmet şartlarını ihlal ediyor.
katma yazar jakobengblom2, kaynak
Anlayamadım, sorun ne, Ömür Bilgili daha önce işe yarayan örnek kodu verdi.
katma yazar Chris, kaynak

Her Google maps’e erişmek için ol.source.Tile bize mümkün. Herkesin ihtiyaç duyduğu için, Openlayers 4'te geliştirilen bir haritaya eklemek için mevcut tüm Google maps katmanını oluşturmak için kullanılan temel kod budur:

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}' }),
});
4
katma
Bunu kullanmayı planlıyorsanız dikkatli olun; Google Haritalar’ın hizmet şartlarının doğrudan bir ihlalidir ve muhtemelen başınız belaya girecektir.
katma yazar NeverEatAlone, kaynak
2
katma
Bunun yasal bir yaklaşım olduğundan şüpheliyim
katma yazar jakobengblom2, kaynak
Konuyla ilgili bir düşünce daha. Fayanslar aşağıdaki adreslerde bulunur: maps.google.com/maps/… OpenLayers ve GoogleMaps API'sinin sürümü. Tek sorun pb parametresinin anlamını bulmak ...
katma yazar DAdkins, kaynak
Tüm pb argümanını hala bilmiyorum, ama döşemenin X, Y ve ZOOM değerleri aşağıda belirtildiği gibi yerleştirilmiştir:! 1m5! 1m4! 1i {ZOOM}! 2i {X}! 3i {Y}! 4i256! 2m3! !! 1E0 2sm 3i3175062737 & zwnj;! 3M9 2spl 3sUS 5e18 & zwnj;!!! 12m1 1e47 12m3 1e37 & zwnj;!!!! 2M1 4e0 1ssmartmaps
katma yazar DAdkins, kaynak
Farkında değildim, ancak @bartvde haklı: API’ler veya İçeriğe erişim dışında servis
katma yazar DAdkins, kaynak

Openlayers, Google haritalarını 3. sürümden itibaren desteklemeyi durdurdu. Openlayers yerine broşür kullanmaya çalışın. Hafif ve neredeyse Openlayers'ın özelliklerine sahip. Bir şey eksikse kolayca ekleyebilirsiniz bir eklentidir.

1
katma

Openlayer’lara Google maps eklemenin bir yolu var. Kodumu kopyalayabilirsiniz. (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; } }

enter image description here

1
katma