小白学webgl合集-三维数据源和格式_三维地图数据源-优快云博客

本文链接：https://blog.youkuaiyun.com/TTTT2222111/article/details/140391625

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

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>