在地图上绘制矩形以获取 OSMLuildings 数据的简便方法

2023-09-12 15:14:24

前言

在做可视化项目的时候, 有一个需求就是让用户选择一个范围, 自动根据选中的范围生成3d地图, 3dtiles数据是一个老大难的问题, 最近终于实现了这个小工具, 可以通过node实现，从OSMBuildings获取3d楼层。

在地图上绘制矩形以获取 OSMLuildings 数据

引入必要的库

首先,我们需要引入一些必要的库,包括请求库、文件系统库和流库:

const request = require('request');
const fs = require('fs');
const stream = require('stream');

定义请求参数

接下来,我们需要定义请求参数, 包括请求url, 请求头和请求参数。请求url是OSMBuildings API的url, 请求头是用来告诉服务器我们请求的是什么类型的数据, 请求参数是用来指定我们要获取的区域的。

const url = 'https://osmbuildings.org/api/v1/download';
const headers = {
  'Accept': 'application/json',
  'Content-Type': 'application/json'
};
const params = {
  bbox: '-122.4194,37.7749,-122.4086,37.7822',
  format: 'obj'
};

发送请求

发送请求后,我们需要等待服务器返回数据。服务器返回的数据是一个json字符串, 我们需要把它解析成json对象。

request.get(url, {headers: headers, params: params}, (error, response, body) => {
  if (error) {
    throw error;
  }
  const data = JSON.parse(body);
});

保存数据

服务器返回的数据是一个json对象, 里面包含了下载链接。我们需要把下载链接保存下来, 然后用它来下载数据。

const downloadUrl = data.url;
const fileName = 'buildings.obj';
fs.createWriteStream(fileName)
  .pipe(request.get(downloadUrl));

使用数据

数据下载完成后, 就可以使用它来生成3d地图了。我们可以使用Three.js或其他3d引擎来加载数据, 然后把它渲染到屏幕上。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new THREE.OBJLoader();
loader.load('buildings.obj', (object) => {
  scene.add(object);
});

camera.position.z = 5;

const animate = () => {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
};

animate();