您的位置:首页 > 教育 > 培训 > 小白学webgl合集-三维数据源和格式

小白学webgl合集-三维数据源和格式

2025/2/24 11:33:48 来源:https://blog.csdn.net/TTTT2222111/article/details/140391625  浏览:    关键词:小白学webgl合集-三维数据源和格式

大多数地图瓦片数据是二维的,三维效果通过渲染和样式设置实现。主要的三维数据源和格式包括:

1. 3D Tiles (CesiumJS)

3D Tiles 是一种开放标准,用于流式传输和可视化大规模三维地理数据。它可以包含各种三维数据,如建筑物、点云、地形等。CesiumJS 是一个常用的开源库,可以加载和渲染 3D Tiles。

2. Mapbox GL JS

Mapbox GL JS 支持加载和渲染三维建筑物和地形数据。虽然其底层数据还是二维矢量瓦片,但通过样式设置可以呈现三维效果。Mapbox 也提供三维地形和建筑物数据源。

3. BIM (Building Information Modeling)

BIM 数据通常用于建筑和工程领域,包含详细的三维建筑物模型。虽然不是传统意义上的地图瓦片,但这些数据可以被用于三维地图展示。

CesiumJS 示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cesium 3D Tiles Example</title><script src="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head>
<body><div id="cesiumContainer"></div><script>const viewer = new Cesium.Viewer('cesiumContainer', {scene3DOnly: true,selectionIndicator: false,baseLayerPicker: false,});viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://assets.cesium.com/1/tileset.json'}));viewer.zoomTo(viewer.entities);</script>
</body>
</html>

Mapbox GL JS 示例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Mapbox GL JS 3D Buildings Example</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet"><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [-74.0066, 40.7135],zoom: 15,pitch: 45,bearing: -17.6});map.on('load', () => {map.addLayer({'id': '3d-buildings','source': 'composite','source-layer': 'building','filter': ['==', 'extrude', 'true'],'type': 'fill-extrusion','minzoom': 15,'paint': {'fill-extrusion-color': '#aaa','fill-extrusion-height': ['interpolate', ['linear'], ['zoom'],15, 0,15.05, ['get', 'height']],'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'],15, 0,15.05, ['get', 'min_height']],'fill-extrusion-opacity': 0.6}});});</script>
</body>
</html>

总结

目前,主流的地图瓦片数据大多是二维的,三维效果通过渲染技术和样式设置实现。不过,像 3D Tiles 这样的格式专门用于三维数据,并且可以直接用于三维地图展示。使用这些三维数据源和工具,可以实现丰富的三维地图效果。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com