小白学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>