🌏 [front-end map] series third play to come, today to bring you is how to achieve a more realistic 3D map. In the first two articles, we explained the basic use of Mapbox and how to design a highly customizable map. If you have not learned how to use Mapbox, you can check the first two articles. This article focuses on the 3D capabilities of Mapbox Gl Js and how to achieve a more realistic 3D map.
Mapbox GL JS
Mapbox GL JS is a JavaScript library for vector maps on the Web. Its performance, real-time styling, and interactive capabilities set the stage for anyone to quickly build immersive maps on the Web.
3 d map
GL JS is designed to render the most detailed, feature-dense maps available on desktop and mobile devices at 60 FPS. The latest VERSION of V2 goes a step further, seamlessly incorporating 3D into any map. Improved block loading times and progressive rendering ensure optimized performance across devices.
Infinite design
Map styles are set with lines, polygons, labels, ICONS, patterns, stretches, raster and terrain, including hundreds of options and a powerful expressive language that not only controls all visual aspects through zoom ranges, but also changes dynamically at any time.
3D terrain and camera API
Each map is automatically adjusted and aligned with the terrain, with markers fixed to the ground. Touch and mouse gestures can be adjusted to the 3D terrain to provide smooth and predictable user interaction. The low-level camera code allows developers to fine-tune the details to make the map work closely with other UI elements for smooth and accurate transitions.
Faster map loading performance
GL JS increases map load by 30% on average and more than 50% in some styles. By improving the priority of resource loading and task allocation, maps load faster and reserve more AVAILABLE CPU resources for Web applications.
Fully interactive
Create rich, powerful interactive map experiences by smoothly adjusting maps to adapt to changing context and exposing any map functionality for user interaction or data analysis.
Large-scale data visualization
Use heat maps, clustering, data-driven expressions, and other GL JS capabilities to visualize data on an unprecedented scale while keeping it fully interactive. The library uses high-performance algorithms capable of handling millions of rendering functions from vector tiling sources and external GeoJSON files.
High-performance DEM
The new Mapbox Raster data API service provides high-performance digital Elevation model (DEM) tiling to support terrain elevation and mountain shadow rendering. The topographic block size is now reduced by 50% compared to traditional Terrain RGB data, corresponding to a 35% improvement in hillshade layer rendering — all part of the new GL JS Web SDK.
3D environment and lighting
Add depth and realism to the map using the Sky, fog, and Sun location API.
Add 3D terrain to the map
Case study: How to add 3D terrain to map
// Own account token
mapboxgl.accessToken = '* * * * * *';
// Initialize the map
const map = new mapboxgl.Map({
container: 'map'.zoom: 13.1.center: [-114.34411.32.6141].pitch: 85.bearing: 80.style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y'
});
// Load terrain data
map.on('load'.() = > {
map.addSource('mapbox-dem', {
'type': 'raster-dem'.'url': 'mapbox://mapbox.mapbox-terrain-dem-v1'.'tileSize': 512.'maxzoom': 14
});
// Add DEM source as topographic layer
map.setTerrain({ 'source': 'mapbox-dem'.'exaggeration': 1.5 });
// Add a sky layer that will appear when the map is highly tilted
map.addLayer({
'id': 'sky'.'type': 'sky'.'paint': {
'sky-type': 'atmosphere'.'sky-atmosphere-sun': [0.0.0.0].'sky-atmosphere-sun-intensity': 15}}); });Copy the codeNote: This article was translated from: www.mapbox.com/mapbox-gljs
The last
Write the article is not easy, remember to pay attention to wechat public number: front-end development enthusiasts to this article to a triple punch it 👍👍👍. Stay tuned, the series will continue to be updated, the next issue will bring more exciting events 🔥🔥🔥