共享单车之数据可视化

11.11.1

于 2024-07-20 17:35:14 发布

阅读量191

点赞数 3

分类专栏：大数据分析实战文章标签：信息可视化

本文链接：https://blog.csdn.net/m0_55885128/article/details/140574726

版权

大数据分析实战专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第1关：绘制地图

任务描述
本关任务：使用JSP在百度地图上绘制一条共享单车起始路程。

相关知识
为了完成本关任务，你需要掌握：

如何创建地图实例；
如何在地图上绘制路程线。

//直接从bengin 开始看，到 end 结束，其余均是无用的。
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body, html,#allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:0;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <title>step1</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");// 创建地图实例
    var point = new BMap.Point(116.10 ,38.98);// 创建点坐标
    map.centerAndZoom(point, 13);//设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别
    map.addControl(new BMap.NavigationControl());//缩放平移控件
    map.enableScrollWheelZoom();//利用鼠标滚轮控制大小
    var start_longitude=116.233093;//开始经度
    var start_latitude=39.04607;//开始纬度
    var stop_longitude=116.235352;//结束经度
    var stop_latitude=39.041691;//结束纬度
    var address=["乡里乡情铁锅炖南228米","擎天矿用材料有限公司北609米"];
 
	/**********   Begin   **********/
 
    //1.初始化路程线
    var polyline = new BMap.Polyline([  
    new BMap.Point(start_longitude, start_latitude),  
    new BMap.Point(stop_longitude, stop_latitude)  
    ],{strokeColor:"red",strokeWeight:3,strokeOpacity:0.5});//创建一条宽度为3外边框透明度为0.5的红色线  
 
    //2.将线添加到地图上
   map.addOverlay(polyline);
 
    //3.调用绘制箭头线函数
   addArrow(polyline,10,Math.PI/7);
 
    //4.设置起始点标注
 
    //①先设置起点位置
    var marker = new BMap.Marker(new BMap.Point(start_longitude,start_latitude)); //创建 
    起点位置标注  
    var label = new BMap.Label(address[0], {offset: new BMap.Size(20, 0)});//给标注设置文 
    字描述  //调用上面已经定义的address数组里面的第一个值，即起点的位置。
    marker.setLabel(label);//将文字描述设置到标注上  
    map.addOverlay(marker);//将标注添加到地图中  
 
   //①再设置终点位置
    var marker = new BMap.Marker(new BMap.Point(stop_longitude,stop_latitude)); //创建终点 
    位置标注  
    var label = new BMap.Label(address[1], {offset: new BMap.Size(20, 0)});//给标注设置文 
    字描述  //调用上面已经定义的address数组里面的第二个值，即终点的位置。
    marker.setLabel(label);//将文字描述设置到标注上  
    map.addOverlay(marker);//将标注添加到地图中  
 
 
//注(也可以是鄙人的一些废话):因为题目中的要求中写到“注意：直接使用已定义的变量，且已定义的变量名不要私自修改”，所以起点，终点位置标注当中 maker和label建议直接照抄左侧格式，不建议修改名称
 
	/**********   End   **********/
 
    //绘制箭头的函数
    function addArrow(polyline,r,angle){
        var linePoint=polyline.getPath();//线的坐标串（里面存的就是起始点的坐标点）
        var arrowCount=linePoint.length;
        for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头
            var pixelStart=map.pointToPixel(linePoint[i-1]);
            var pixelEnd=map.pointToPixel(linePoint[i]);
            var pixelTemX,pixelTemY;//临时点坐标
            var pixelX,pixelY,pixelX1,pixelY1;//定义箭头两个点坐标
            var delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);//主线斜率，垂直时无斜率
            var param=Math.sqrt(delta*delta+1);//代码简洁考虑
            if((pixelEnd.x-pixelStart.x)<0){ //第二、三象限
                pixelTemX=pixelEnd.x+ r/param;
                pixelTemY=pixelEnd.y+delta*r/param;
            }else{ //第一、四象限
                pixelTemX=pixelEnd.x- r/param;
                pixelTemY=pixelEnd.y-delta*r/param;
            }
            //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
            pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;
            pixelY=pixelTemY-Math.tan(angle)*r/param;
            pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;
            pixelY1=pixelTemY+Math.tan(angle)*r/param;
            var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));
            var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));
            var Arrow = new BMap.Polyline([
                pointArrow,linePoint[i],pointArrow1
            ], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
            map.addOverlay(Arrow);
            return Arrow;
        }
    }
</script>

第2关：绘制流量最高的五条线路的路程图

任务描述
本关任务：在地图上绘制共享单车中流量最高的五条路线的路程。

相关知识
本实训数据基于共享单车之数据分析最后一关的数据（流量最高的五条数据）。

为了完成本关任务，你需要掌握：

如何在后台传数据给JSP页面；
JSP页面中如何获取后台传的数据；
如何在地图上绘制多条路程线。

//servlet里的代码
package com.educoder.servlet;
import com.educoder.util.HBaseUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Set;
public class BickMapServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
        BickMap bickMap = HBaseUtil.scanTable(); //直接从左侧的提示栏中cv
         for (String key : bickMap.getKeys()) {  
        request.setAttribute(key,bickMap.get(key));//遍历将最高五条流量的数据以“字段名-结果集合”形式传到后台  
    }    
        request.getRequestDispatcher("step2.jsp").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}