一个简单的网页系统(二)-地图界面

一个简单的网页系统(二)

            前面的文章简单介绍了网页系统的首页,这次要介绍网页的地图部分。关于前面的leaflet.js已经简单介绍了,在可视化的类别中有介绍。

一.效果展示

一个简单的网页系统(二)-地图界面_第1张图片

二.代码分析

1. 使用leaflet.js 库使用OSM地图源,将中心点设置为北京,并设置zoom大小。

2. 添加站点:查询要标注地点的经纬度,使用d3加入相应的svg图形并添加文字。

3. 画路径:查询地铁线路经过的火车站点,查询经纬度。使用d3.svg.line 函数完成行程路线。

4. 添加监听事件: 为几个站点添加监听事件,当点击站点时会进行页面的跳转。

三.代码展示





	Tour China
	
	
             
             
             
             
	


  
  

四.后期展示

 之后会有最后一篇关于此网页系统的文章,并附上自己gitHub源码位置。



 


你可能感兴趣的:(web前端,可视化,Web前端,leaflet.js)