54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core";
|
|
import googleStaticMapsTile from "google-static-maps-tile";
|
|
import log from "loglevel";
|
|
|
|
export class Gmap {
|
|
private readonly scene: Scene;
|
|
|
|
constructor(scene: Scene) {
|
|
this.scene = scene;
|
|
}
|
|
|
|
public async createMapTiles(lat, lon) {
|
|
log.debug('createMapTiles', lat, lon)
|
|
googleStaticMapsTile({
|
|
areaSize: '2560x2560',
|
|
center: '26.443397,-82.111512',
|
|
zoom: 12,
|
|
imagePerLoad: 50,
|
|
durationBetweenLoads: 60 * 1000 + 100,
|
|
key: 'AIzaSyD4jJCYcIvHDEiOkVxC2c4zNYRqZKYHMMk',
|
|
maptype: 'satellite'
|
|
})
|
|
.on('progress', function (info) {
|
|
const image = info.image;
|
|
image.style.position = 'absolute';
|
|
image.style.left = info.data.x + 'px';
|
|
image.style.top = info.data.y + 'px';
|
|
document.body.appendChild(image);
|
|
});
|
|
}
|
|
|
|
public createMap(lat, lon) {
|
|
//const lat = 42.3369513;
|
|
//const lon = -88.8707076;
|
|
|
|
const plane = MeshBuilder.CreatePlane("plane", {width: 1, height: 1}, this.scene);
|
|
const materialPlane = new StandardMaterial("texturePlane", this.scene);
|
|
const zoom = 10;
|
|
|
|
|
|
materialPlane.diffuseTexture =
|
|
new
|
|
Texture(`https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lon}&zoom=${zoom}&size=640x640&key=AIzaSyD4jJCYcIvHDEiOkVxC2c4zNYRqZKYHMMk`,
|
|
this.scene);
|
|
materialPlane.specularColor = new Color3(0, 0, 0);
|
|
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element
|
|
plane.material = materialPlane;
|
|
plane.rotation.x = Angle.FromDegrees(90).radians();
|
|
plane.rotation.y = Angle.FromDegrees(180).radians();
|
|
plane.position.y = 0.1;
|
|
plane.position.z = -5;
|
|
}
|
|
}
|