OSMBuildings 开源项目教程-优快云博客

OSMBuildings 开源项目教程

OSMBuildings 3d building geometry viewer based on OpenStreetMap data 项目地址: https://gitcode.com/gh_mirrors/os/OSMBuildings

1. 项目介绍

OSMBuildings 是一个基于 OpenStreetMap 数据的三维建筑几何查看器。它允许开发者在其应用程序中集成三维建筑可视化功能，提供了一个简单而强大的 API 来加载和显示三维建筑模型。OSMBuildings 支持多种数据格式，并且可以通过简单的配置快速集成到现有的 Web 应用中。

2. 项目快速启动

2.1 环境准备

在开始之前，确保你已经安装了以下工具：

现代浏览器（如 Chrome、Firefox）
文本编辑器（如 VSCode、Sublime Text）

2.2 快速集成

以下是一个简单的示例，展示如何在 HTML 页面中集成 OSMBuildings：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OSMBuildings 示例</title>
    <link href="https://cdn.osmbuildings.org/4.0.0/OSMBuildings.css" rel="stylesheet">
    <script src="https://cdn.osmbuildings.org/4.0.0/OSMBuildings.js"></script>
</head>
<body>
    <div id="map" style="height: 100vh;"></div>
    <script>
        var osmb = new OSMBuildings({
            container: 'map',
            position: { latitude: 52.52000, longitude: 13.41000 },
            zoom: 16,
            minZoom: 15,
            maxZoom: 22
        });

        osmb.addMapTiles(
            'YOUR_TILESET_URL',
            {
                attribution: '© Data <a href="http://openstreetmap.org/copyright/">OpenStreetMap</a> · © Map <a href="http://mapbox.com">Mapbox</a>'
            }
        );

        osmb.addGeoJSONTiles('http://[s].data.osmbuildings.org/0.2/anonymous/tile/[z]/[x]/[y].json');
    </script>
</body>
</html>