第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>
最后,最后,respect 各位!