Openlayers v4.0.1はGoogle Maps JavaScript APIをサポートしていますか？
回答:
私のWMSレイヤーの下で、このようにOpenLayers 4.2でGoogleマップを使用でき、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}' })})なぜプラグインが必要なのですか？
JSFiddle リンク
ロードマップ用
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}' })})Geoserverまたは他のベクトルソースを使用しているときに、EPSG：3857プロジェクションで当てはまる問題に直面した場合。このように使う
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'
})
}),ol.source.Tileを使用して、すべてのGoogleマップにアクセスできます。誰もが必要とする場合、これは、Openlayers 4で開発されたマップに追加するすべての利用可能なgoogle mapsレイヤーを作成するための基本的なコードです。
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}' }),
});いいえ、そうではありません。GMapを使用したタイルへの直接アクセスがないため、おそらくサポートされません。私が知っている唯一のオプションは、次のようなものです：https : //github.com/mapgears/ol3-google-maps
私はすでにここで回答を示しています：https : //stackoverflow.com/a/42616386/6068293 コメントがありましたら、それがあなたが探しているものですか？
プレーンマップデータのソリューションを作成するには、そのようなリクエストによってダウンロードされたデータの理解を組み合わせる必要があり ます。 ！3i816！2i4！3x65535！2m3！1e0！2sm！3i375060690！2m38！1e2！2sspotlight！4m2！1sgid！2sXMf6EbH1C4DOnd6foX0POg！8m32！2sf64x2c0f0x0c0c0c0f0c0c0c0f0f0d0f0f0f0f0d0f0c0f0d0f0d0f0d0f0d0f0d0f0d0f0d0f0d0f0c0c + Stany + Zjednoczone！4m2！3d34.0522342！4d-118.24368489999999！5e1！6b1！9e0！11e1！13m10！2shplexp％2Ca！15b1！18m3！5b0！6b0！8b0！22m3！6e2！7e3！8e2！19e9！7e2！19e ！19u11！19u12！19u14！19u20！20m1！1e6！3m8！2spl！3spl！5e1105！12m4！1e68！2m2！1sset！2sRoadmap！4e1！6m6！1e12！2i2！28e3！39b1！44e2！50e0＆50e0＆0
ブラウザのメモリにデータを作成：https : //superuser.com/questions/948738/what-is-the-blobhttp-prefix-and-where-can-i-learn-more-about-this and retrievingブラウザに配置されたBLOBデータからのタイル
Googleマップをopenlayersに含める方法があります。私のコードをコピーできます。（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;
}
}
