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 群或微信群。
领取专属 10元无门槛券
私享最新 技术干货