大多数地图瓦片数据是二维的,三维效果通过渲染和样式设置实现。主要的三维数据源和格式包括:
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 这样的格式专门用于三维数据,并且可以直接用于三维地图展示。使用这些三维数据源和工具,可以实现丰富的三维地图效果。