一、项目需求
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