学习
实践
活动
专区
工具
TVP
写文章

使用 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 群或微信群。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190904A0CHWM00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券