EduCoder （头歌）共享单车之数据可视化

奥特赛德OUTISDER

已于 2022-05-10 19:58:23 修改

阅读量7.7k

点赞数 35

文章标签：大数据

于 2022-05-10 17:54:42 首次发布

本文链接：https://blog.csdn.net/Serein0711/article/details/124692925

版权

第1关：绘制地图

// 图片与题目无关，可以忽略//

(本人是菜鸟一枚，如果发现错误，属于正常，希望各位大佬批评指正！)

编程要求:

在右侧编辑器补充代码，绘制出一条河北省保定市雄县（经纬度为116.10，38.98）一共享单车使用的路程线，具体信息如下：

1.起点经纬度为（39.04607，116.233093）；

2.终点经纬度为（39.041691，116.235352）；

3.要求设置路程线为红色，宽度为**3,透明度为0.5**;

4.给起点和终点都创建标注，描述起点为乡里乡情铁锅炖南228米，终点为擎天矿用材料有限公司北609米，要求设置的字体大小为**20**；

5.调用提供绘制箭头函数addArrow函数添加**r=10，angle=Math.PI/7**的箭头。

注意：直接使用已定义的变量，且已定义的变量名不要私自修改。

The answer(Ⅰ.这边建议先自己写哦，不要不讲伍德，直接copy！

Ⅱ.直接看begin 和end之间的部分！)

//直接从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关：绘制流量最高的五条线路的路程图

编程要求:

在右侧编辑器补充代码，绘制流量最高的五条数据的路程线，具体要求如下：

1.在servlet中将字段名为key，bickMap.get(key)为value作为键值对方式传值给jsp;

2.绘制路程线样式为红色，宽度为**3,透明度为0.5**;

3.调用提供绘制箭头函数addArrow，绘制以**r=10，angle=Math.PI/7**的箭头；

4.绘制起始地点的标注信息，文字大小仍为20。

注意：直接使用已定义的变量，且已定义的变量名不要私自修改。

The answer(小傻瓜们，注意了，要在两个文件中分别写代码哦！)

//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");

        /**********   Begin   **********/

        //1.通过HbaseUtil类获取数据
        BickMap bickMap = HBaseUtil.scanTable(); //直接从左侧的提示栏中cv
   
		//2.遍历将数据以键值对的方式传给jsp
         for (String key : bickMap.getKeys()) {  
        request.setAttribute(key,bickMap.get(key));//遍历将最高五条流量的数据以“字段名-结果集合”形式传到后台  
    }    //直接从左侧的提示栏中cv

        /**********   End    **********/
        request.getRequestDispatcher("step2.jsp").forward(request,response);

    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

//step2.jsp里面的代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<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>step2</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<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();//利用鼠标滚轮控制大小

	/**********   Begin  **********/
	//1.获取后台传过来的数据 调用已写好的change函数清理数据
   //根据固定格式直接照搬照抄
    var start_longitude = change('<%=request.getAttribute("start_longitude") %>');  
    var start_latitude = change('<%=request.getAttribute("start_latitude") %>');  
    var stop_longitude = change('<%=request.getAttribute("stop_longitude") %>');  
    var stop_latitude = change('<%=request.getAttribute("stop_latitude") %>');  
    var start_address = change('<%=request.getAttribute("start_address") %>');   //起点
    var stop_address = change('<%=request.getAttribute("stop_address") %>');    //终点

    //2.初始化路程线

    for (var i=0;i<start_latitude.length;i++){  
    var polyline = new BMap.Polyline([  
        new BMap.Point(start_longitude[i], start_latitude[i]),  
        new BMap.Point(stop_longitude[i], stop_latitude[i])  
    ], {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5});  //还是从左侧照搬照抄

        //3.将线添加到地图上

         map.addOverlay(polyline);    //又从左侧抄过来

        //4.调用绘制箭头线函数

        addArrow(polyline,10,Math.PI/7);  //怎么还是抄左侧的呀

        //5.设置起始点标注

        //这一部分可以参考第一关来写。

        var marker = new BMap.Marker(new BMap.Point(start_longitude[i],start_latitude[i]));  
        var label = new BMap.Label(start_address[i],{offset: new BMap.Size(20, 0)});  
        marker.setLabel(label);  
        map.addOverlay(marker);  
        var marker = new BMap.Marker(new BMap.Point(stop_longitude[i],stop_latitude[i]));  
        var label = new BMap.Label(stop_address[i], {offset: new BMap.Size(20, 0)});  
        marker.setLabel(label);  
        map.addOverlay(marker);  

       //其中前四部分表示的是起点的位置获取，后四部分表示的是终点的位置获取
 
    }

//结束啦！！！

	/**********   End   **********/


    //数据转化函数
    function change(obj) {
        obj = obj.substring(1,obj.length - 1).split(",");
        return obj;
    }

    //绘制箭头的函数
    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>