当前位置：首页 > news >正文

头歌：共享单车之数据可视化

news 来源：原创 2024/9/20 20:27:10

第1关绘制地图

<%@ 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 start_longitude=116.233093;//开始经度var start_latitude=39.04607;//开始纬度var stop_longitude=116.235352;//结束经度var stop_latitude=39.041691;//结束纬度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 marker1 = new BMap.Marker(new BMap.Point(stop_longitude,stop_latitude)); //创建开始位置标注  var label = new BMap.Label(address[0], {offset: new BMap.Size(20, 0)});//给标注设置文字描述  var label1 = new BMap.Label(address[1], {offset: new BMap.Size(20, 0)});//给标注设置文字描述marker.setLabel(label);//将文字描述设置到标注上  map.addOverlay(marker);//将标注添加到地图中  marker1.setLabel(label1);map.addOverlay(marker1);/**********   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关绘制流量最高的五条线路的路程图

//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 {@Overrideprotected 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.遍历将数据以键值对的方式传给jspfor (String key : bickMap.getKeys()) {  request.setAttribute(key,bickMap.get(key));//遍历将最高五条流量的数据以“字段名-结果集合”形式传到后台  }    //直接从左侧的提示栏中cv/**********   End    **********/request.getRequestDispatcher("step2.jsp").forward(request,response);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}