使用 mapbox 实现全国房价数据可视化

1. mapbox 介绍

mapbox 是一个开源的地图引擎，为开发者提供专业地图开发工具，包括高度开放的 API 和开源 SDK，同时对跨平台有非常好的支持。

同时，支持离线地图的加载，如自己部署地图服务器，然后前端通过 mapbox 引擎进行加载渲染。

1.1 为什么选择 mapbox

mapbox 提供了非常优雅的地图样式、足够强大的前段地图框架 mapboxgl，以及非常丰富的前段空间运算处理框架生态。

同时如果需要私有化部署，可以进行几乎无缝地切换。

mapbox 分公司也入驻中国，感兴趣可以去查阅相关报道。

2. 主要技术栈

下面简要介绍下使用到的技术栈，部分技术栈已在我们的社区中录制成视频教程，感兴趣的下载学习即可。

2.1 数据抓取与清洗

使用 Python + BeautifulSoup 进行数据的抓取，后端采用 MongoDB 进行存储，并在入库后进行对应的数据清洗、关联处理。

2.2 后端 + 前端

后端采用对应的后端语言实现数据接口 API，部分数据接口已通过 API Key 的形式提供给大家进行快速地数据读取。

前端使用 ant.design 进行布局，mapboxgl 作为前端地图引擎进行地图的加载、数据渲染操作。

如果使用 mapbox 作为底图，需要注意坐标系的问题，如果数据的坐标系与 mapbox 的坐标系（WGS84）不对应，那么在数据渲染前需要进行坐标系的转换。

地图数据图例通过前端 colormap 框架实现了渐变色的生成。

最终实现了房价从低到高，颜色表现从冷色到暖色渐变，图标从小到大的渐变。

3. 最终效果图

查看地址：https://visual.gugudata.com

部分城市的数据会触发频率阈值，暂未开放。

加入社群，与 1000 多位朋友共同成长

DevOpen.Club Pro 高质量软件开发分享讨论群，汇聚了近 1000 多名各行各业的软件开发人员，是供朋友们分享高质量资源、讨论软件开发问题解决方案、寻求孵化项目合作伙伴的干货社区。

任何技术都不是限制，我们最终目的是将技术转化成收入，实现财务自由。

#社群更新的原创视频教程 & 孵化项目#

1. 结合之前的 60 集微信小程序基础课程，再次更新 20 集微信天气预报小程序实战开发原创实战视频课程；

2. 80 节实战课精通 React Native 开发：我出版的书籍《React Native 精解与实战》配套视频教程；

3. TypeScript 快速入门上手实战，前端开发入门必备；

4. 编程大世界：软件开发基础知识通解，带你进入软件开发的大世界；

5. 50 个 Chrome Developer Tools 必备技巧：前端开发人员必备技能点；

6. 我们的微信群中孵化出来的一个团队，做了一个服务于伦敦租房的小程序项目，已上线，在持续迭代；

7. 付费数据接口的无限制免费调用权限，已在微信群中分配了最高权限的 Key。

#DevOpenClub Pro 社群指南#

1. 每日分享高质量的技术开发头条信息与资源；

2. 遇到任何技术问题都可以进行快速提问、讨论交流；

3. 永久获取每年原创的开发视频教程第一手资源更新；

4. 获取其他高质量软件开发行业新闻、技术文章、教学视频分享；

5. 群中认识更多的朋友以及分享合作开发项目的机会；

6. 认识更多的行业朋友，或者交流自己的创业小项目；

7. 交流与分享技术面试心得；

8. 高质量、有价值的社区永远都不会是你所在的 QQ 群或微信群。