【小沐学GIS】基于ubuntu+three.js的OSM建筑模型显示（node.js、Python）

爱看书的小沐

已于 2024-09-28 20:45:48 修改

阅读量540

点赞数 18

分类专栏： Python GIS OpenGL 文章标签： ubuntu python node.js osm three.js opengl linux

于 2024-09-28 19:48:27 首次发布

本文链接：https://blog.csdn.net/hhy321/article/details/142618888

版权

Python 同时被 3 个专栏收录

113 篇文章 105 订阅

订阅专栏

GIS

28 篇文章 46 订阅

订阅专栏

OpenGL

22 篇文章 3 订阅

订阅专栏

1、简介

1.1 ubuntu

https://cn.ubuntu.com/download
https://ubuntu.com/download
Ubuntu是一个以桌面应用为主的Linux发行版操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu"一词，意思是“人性”“我的存在是因为大家的存在"，是非洲传统的一种价值观。Ubuntu基于Debian发行版和GNOME桌面环境，而从11.04版起，Ubuntu发行版放弃了GNOME桌面环境，改为Unity。此前人们认为Linux难以安装、难以使用，在Ubuntu出现后这些都成为了历史。Ubuntu也拥有庞大的社区力量，用户可以方便地从社区获得帮助。自Ubuntu 18.04 LTS起，Ubuntu发行版重新开始使用GNOME3桌面环境。
在这里插入图片描述

1.2 node

https://nodejs.cn/
https://nodejs.org/zh-cn
Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
在这里插入图片描述

1.3 python

https://www.python.org/
Python由荷兰国家数学与计算机科学研究中心的吉多·范罗苏姆于1990年代初设计，作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构，还能简单有效地面向对象编程。Python语法和动态类型，以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应用的编程语言，随着版本的不断更新和语言新功能的添加，逐渐被用于独立的、大型项目的开发。
在这里插入图片描述

1.4 osm

https://www.openstreetmap.org/
OpenStreetMap开放街道地图（ OSM）是一个非常详细的地图数据，是一个建构自由内容之网上地图协作计划，目标是创造一个内容自由且能让所有人编辑的世界地图，并且让一般的移动设备有方便的导航方案。其OSM数据开源，可以自由下载使用，免费的全球地图数据库。
在这里插入图片描述

1.5 three.js

https://threejs.org/
Three.js是一个基于WebGL的JavaScript库，它使得在网页上创建和显示3D图形变得简单。Three.js提供了一套易于使用的API，封装了WebGL的复杂性，让开发者能够快速地创建3D内容，而无需深入了解WebGL的细节。
在这里插入图片描述

2、安装ubuntu

https://cn.ubuntu.com/download/server/step1
在这里插入图片描述
安装完ubuntu 服务器版本后，进入命令行界面如下：

查看linux版本：

uname -a

在这里插入图片描述

3、安装node

在这里插入图片描述

通过代码编译node程序。

下载node代码
https://nodejs.org/dist/latest-v17.x/

通过wget下载node程序。

wget https://nodejs.org/dist/latest-v17.x/node-v17.9.1-linux-x64.tar.xz --no-check-certificate

在这里插入图片描述
或通过curl下载node程序。

curl -O  https://nodejs.org/dist/latest-v17.x/node-v17.9.1-linux-x64.tar.xz

在这里插入图片描述
解压node的压缩包。

tar xvf node-v17.9.1-linux-x64.tar.xz

在这里插入图片描述
依次执行以下命令，创建软链接。

ln -sf /home/test/node-v17.9.1-linux-x64/bin/node /usr/bin/node
ln -sf /home/test/node-v17.9.1-linux-x64/bin/npm /usr/bin/npm

在这里插入图片描述

配置npm使用taobao源。

查看当前的registry

npm config get registry

在这里插入图片描述

设置当前的registry

# 淘宝镜像源
npm config set registry https://registry.npmmirror.com
npm config set registry https://npm.aliyun.com
# 腾讯云镜像源
npm config set registry http://mirrors.cloud.tencent.com/npm/
# 华为云 镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
# npm 官方原始镜像
npm config set registry https://registry.npmjs.org/

在这里插入图片描述

查看设置后的registry,可见已设置成功

npm config get registry

在这里插入图片描述
anyWhere是一个静态文件服务，可以用于web应用部署，文件服务搭建和分享等场景，使用比较简单。

$ anywhere
// or with port
$ anywhere -p 8000
// or start it but silent(don’t open browser)
$ anywhere -s
// or with hostname
$ anywhere -h localhost -p 8888
// or with folder
$ anywhere -d ~/git/anywhere
// or enable html5 history
$ anywhere -f /index.html

npm -g install anywhere

在这里插入图片描述
运行anywhere命令：

anywhere

在这里插入图片描述
在浏览器访问：

http://192.168.1.4:8000

在这里插入图片描述

4、安装python

安装python3程序：

sudo apt install python3

在这里插入图片描述

运行python的内置web服务器：

python3 -m http.server 9000

在这里插入图片描述

防火墙端口开通：

sudo ufw allow 9000/tcp

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！