数据可视化基础实验6：完成地图类型的图表

1实验概述地图是地理数据最常用的表现方法。本实验通过D3完成GeoJson格式的地图绘制，以及地图上的点，线绘制。并通过Leaflet插件和高德地图服务API完成完整的带交互的地图展示。实验目的完成本实验后，应该能够使用D3绘制中国地图绘制单个省份地图在地图上根据经纬度绘制圆点在地图上根据经纬度绘制线使用leaflet插件显示完整的地图实验背景为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，插件和数据，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实验步骤数据背景：基于中国的GeoJson数据，完成中国地图的绘制，并通过颜色区分各个省的区域。进入实验环境：1、使用编辑器打开MyDemo\Test-06\0601-map-china.html2、声明并创建地图投影方式varprojection=d3.geoMercator().center([109.5996,35.6396])//设置中心点2.scale(800)//后续放大缩小地图使用projection.cale(xxx).translate([width/2,height/2]);设置路径计算函数varpath=d3.geoPath(projection);添加路径呈现地图g.selectAll(".map-feature").data(data.features).enter().append("path").attr("class","map-feature").attr("d",path).style("cursor","pointer").attr("fill",function(d,i){returncolor(i);.on("click",function(d){alert();.on("mouseover",function(d){g.append("text").attr("class","label-name").attr("fill","#d6d6d6").attr("transform","translate("+width/2+",60)").text().on("mouseout",function(){d3.select(".label-name").remove();使用Chrome打开界面呈现效果如下3数据背景：基于上海市的GeoJson数据，完成上海地图的绘制。进入实验环境：1、使用编辑器打开MyDemo\Test-06\0602-map-shanghai.html2、操作方式同绘制中国地图，只需数据源即可d3.json("../data/shanghai.json",function(error,data){if(error){throwerror}//code3、使用Chrome打开界面呈现效果如下4数据背景：根据上海地铁一号线的各个站点的经纬度数据，在已经完成的上海地图上为各个站点绘制点标。进入实验环境：1、编辑器打开MyDemo\Test-06\0603-map-lng-lat.html2、添加circle元素注意坐标与像素转换方式g.selectAll(".map-station").data(lineOne).enter().append("circle").attr("class","map-station").attr("fill","#05cdc2")5.attr("r",2).attr("cx",function(d){returnprojection(d.lnglat)[0].attr("cy",function(d){returnprojection(d.lnglat)[1]3、使用Chrome打开界面呈现效果如下数据背景：根据上海地铁一