<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<%@page isELIgnored="false" %>
|
<%
|
String version ="1.000004";
|
response.setHeader("Cache-Control","no-store");
|
response.setHeader("Pragrma","no-cache");
|
response.setDateHeader("Expires",0);
|
%>
|
<!DOCTYPE html>
|
<head>
|
<meta charset="utf-8" />
|
<title></title>
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
<script type="text/javascript">
|
if(typeof (JSON) == 'undefined'){
|
$.getScript("js/json2.js");
|
}
|
</script>
|
</head>
|
<style type="text/css">
|
body,
|
html,
|
#mapCanvas{
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
z-index: 0;
|
font-size: 14px;
|
font-family: "微软雅黑";
|
}
|
.main_body{
|
border: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
*{
|
margin:0;
|
padding:0;
|
list-style:none;
|
}
|
.tools_box{
|
position: absolute;
|
height: 120px;
|
width: 400px;
|
right: 1px;
|
top: 20px;
|
z-index: 1;
|
}
|
</style>
|
|
<body>
|
<div class="main_body">
|
<div id="mapCanvas"></div> <!-- 百度地图 -->
|
<!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
|
<div id="traceabilityParams" style="display: none;">
|
${requestScope.traceabilityParams}
|
</div>
|
</div>
|
</body>
|
</html>
|
|
<script>
|
var moralMap={};
|
var defaultParam = {
|
minZoom: 12,
|
maxZoom: 20
|
};
|
var mapStyle = {
|
features: ["road", "building", "water", "land"], // 隐藏地图上的poi
|
style: "normal" // 设置地图风格为高端黑
|
};
|
var params = $.parseJSON($("#traceabilityParams").html());
|
moralMap['params'] = params;
|
var sensorInfo=params["sensorInfo"];
|
var regionName=params["regionName"];
|
var longitude=params["device"]["longitude"];
|
var latitude=params["device"]["latitude"];
|
var longitudeSecond=params["deviceSecond"]["longitude"];
|
var latitudeSecond=params["deviceSecond"]["latitude"];
|
var regoinNameNew= regionName.split(" ");
|
var cityName = regoinNameNew.length>1?regoinNameNew[1]:regoinNameNew[0];
|
var map = new BMap.Map("mapCanvas",defaultParam);
|
map.setCurrentCity(cityName);
|
map.setMapStyle(mapStyle);
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
var navigation = new BMap.NavigationControl({
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
type: BMAP_NAVIGATION_CONTROL_LARGE
|
});
|
map.addControl(navigation); // 增加导航控件
|
var point = new BMap.Point(longitude, latitude);// 设置中心点坐标和地图级别
|
var pointSecond=new BMap.Point(longitudeSecond, latitudeSecond);
|
var distance=parseInt(map.getDistance(point,pointSecond));//两点间距离，单位米
|
map.centerAndZoom(point, 18);
|
var marker = new BMap.Marker(point); // 创建标注
|
map.addOverlay(marker);
|
var polyline = new BMap.Polyline([
|
new BMap.Point(longitude, latitude),
|
new BMap.Point(longitudeSecond, latitudeSecond)
|
],
|
{strokeColor:"blue", strokeWeight:1, strokeOpacity:0.5}
|
);
|
map.addOverlay(polyline);// 画两点间线
|
// 中间画箭头方法
|
function addArrow(polyline,length,angleValue){
|
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 angle=angleValue;// 箭头和主线的夹角
|
var r=length; // r/Math.sin(angle)代表箭头长度
|
var delta=0; // 主线斜率，垂直时无斜率
|
var param=0; // 代码简洁考虑
|
var pixelTemX,pixelTemY,poMiddleX,poMiddleY;// 临时点坐标
|
var pixelX,pixelY,pixelX1,pixelY1;// 箭头两个点
|
poMiddleX=(pixelEnd.x+pixelStart.x)/2;
|
poMiddleY=(pixelEnd.y+pixelStart.y)/2;
|
if(poMiddleX-pixelStart.x==0){ // 斜率不存在时
|
pixelTemX=poMiddleX;
|
if(poMiddleY>pixelStart.y){
|
pixelTemY=poMiddleY-r;
|
}else{
|
pixelTemY=poMiddleY+r;
|
}
|
// 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
|
pixelX=pixelTemX-r*Math.tan(angle);
|
pixelX1=pixelTemX+r*Math.tan(angle);
|
pixelY=pixelY1=pixelTemY;
|
}else{ // 斜率存在时
|
delta=(poMiddleY-pixelStart.y)/(poMiddleX-pixelStart.x);
|
param=Math.sqrt(delta*delta+1);
|
if((poMiddleX-pixelStart.x)<0){ // 第二、三象限
|
pixelTemX=poMiddleX+ r/param;
|
pixelTemY=poMiddleY+delta*r/param;
|
}else{ // 第一、四象限
|
pixelTemX=poMiddleX- r/param;
|
pixelTemY=poMiddleY-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 pointMiddle=map.pixelToPoint(new BMap.Pixel(poMiddleX,poMiddleY));
|
var Arrow = new BMap.Polyline([pointArrow,pointMiddle,pointArrow1],
|
{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
|
map.addOverlay(Arrow);
|
}
|
};
|
var arrowLength;//两点间箭头长度
|
if(distance<=100){
|
arrowLength=5;
|
}else if(distance>100&&distance<=200){
|
arrowLength=10;
|
}else if(distance>200&&distance<=500){
|
arrowLength=20;
|
}else if(distance>500&&distance<=1000){
|
arrowLength=40;
|
}else if(distance>1000&&distance<=2000){
|
arrowLength=80;
|
}else if(distance>2000&&distance<=3000){
|
arrowLength=120;
|
}else{
|
arrowLength=150;
|
}
|
addArrow(polyline,arrowLength,Math.PI/7);
|
// 设置坐标图标
|
var icon1 = new BMap.Icon("/img/ico00.png",new BMap.Size(50,50));
|
var mark1 = new BMap.Marker(new BMap.Point(longitude,latitude),{icon:icon1});
|
map.addOverlay(mark1);
|
var mark2 = new BMap.Marker(new BMap.Point(longitudeSecond,latitudeSecond),{icon:icon1});
|
map.addOverlay(mark2);
|
|
</script>
|
