本文介绍了一个利用前后端全栈技术实现的纽约州交通事故数据可视化项目。项目需求包括在地图上显示事故地点、统计图表、按时间和区域过滤等功能。技术选型采用百度地图、React前端框架、Express后端框架和MongoDB数据库。项目搭建过程中，前端通过create-react-app创建React项目，引入百度地图API并在index.js中编写代码。后端使用Express读取CSV数据并导入MongoDB，通过axios进行前后端交互。尽管实现的功能有限，但项目帮助作者深入理解了前后端工作流程和交互方式。
一、项目需求
1、数据：
https://data.cityofnewyork.us/api/views/h9gi-nx95/rows.csv?accessType=DOWNLOAD
2、功能：
-
在地图上显示出事故发生的地点
-
显示当前展示数据的统计图表
-
可以按时间、区域过滤
-
可以在地图指定任意点按地理半径过滤数据。例如：10公里内、50公里内
-
-
展示出事故发生因素之间的关系，给出出行建议
二、项目分析
题目要求将交通事故数据在地图上展示出来。首先，交通事故的数据格式是csv文件，需要在后端把csv格式的数据读取出来放在数据库中，然后根据前端发送的请求进行过滤处理后响应给前端，前端再调用地图接口将接收到的数据显示在地图上。所以，该项目涉及前后端全栈开发。
三、技术选型
首先，地图我想到的是选用百度地图，因为百度地图是国内的，申请开发者密钥比较方便，而google地图则需要翻墙；前端框架我选用的是react，使用其他框架也可以，看个人喜好；后端框架我选用的是express，因为不会其他的，哈哈；数据库选用mongodb，因为mongodb入门非常简单，很容易上手使用。
四、项目搭建
1、前端部分
前端用的是react框架，直接使用react脚手架create-react-app快速构建前端文件目录，也就是在终端执行create-react-app react-baidumap，react-baidumap就是我的前端部分的项目文件名，然后cd react-baidumap 进入项目文件，接着执行npm run eject（为了查看配置）和npm start就可以看到项目文件下自动创建的目录，打开localhost:3000可以看到react的官方图标。这部分的内容可以参考react官方教程：https://react.docschina.org/docs/create-a-new-react-app.html#create-react-app我也是照着官方教程来的。至此，前端的项目框架就搭建好了，如下图所示：
接着我们打开public文件夹，找到index.html文件，我们要使用百度地图接口，就需要在这里使用script标签引入资源，以下为index.html文件的内容：
<!DOCTYPE html
最低0.47元/天 解锁文章
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
