Hi ,
I want to use height map on my dynamic tiled map. with the aid of mapbox api, I get the altitude in terms of lat/long in my code, and then I use the altitude in my height map. but there are some problems in my codes, is it possible help me know how can I do it correct way.
here is my PG:https://playground.babylonjs.com/#X2ULQN#33
var allFeatures;
// get altitude
// Construct the API request
var query = 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/tilequery/' + latlong.longitude + ',' + latlong.latitude + '.json?layers=contour&limit=50&access_token=' + token;
$.ajax({
method: 'GET',
'async': false,
url: query,
}).done(function (data) {
// Get all the returned features
allFeatures = data.features;
});
// console.log(allFeatures);
// Create an empty array to add elevation data to
var elevations = [];
// For each returned feature, add elevation data to the elevations array
for (let i = 0; i < allFeatures.length; i++) {
elevations.push(allFeatures[i].properties.ele);
}
// console.log(elevations);
// In the elevations array, find the largest value
var highestElevation = Math.max(...elevations);
var lowestElevation = Math.min(...elevations);
// console.log("hhh", highestElevation)
var mapURL =
"https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/" +
id +
"?access_token=" +
token;
// CreateGroundFromHeightMap
var ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap(
"ground", mapURL,
{ width: width * factor, height: width * factor, minHeight: lowestElevation, maxHeight: highestElevation, subdivisions: 100. }, this.scene);
ground.position = new BABYLON.Vector3(
(tileX * factor - xTileBase + factor / 2) * width,
-factor * 0.1,
-(tileY * factor - yTileBase + factor / 2) * width
);
ground.material = material;