| New file |
| | |
|---|
| | | <%@ 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 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);// 设置中心点坐标和地图级别
|
|---|
| | | 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(longitude+0.005, latitude+0.005) |
|---|
| | | ], |
|---|
| | | {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);
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | addArrow(polyline,40,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(longitude+0.005,latitude+0.005),{icon:icon1});
|
|---|
| | | map.addOverlay(mark2); |
|---|
| | | |
|---|
| | | </script>
|
|---|
