效果图
轨迹回放
JSP
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>XXX</title>
<script src="http://webapi.amap.com/maps?v=1.3&key=63dd2746f7ca2b0bd5242b297e22d50f&callback=init"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
//初始化地图
function init(){
var centerLatitude = "105.729085";
var centerLongitude = "35.963913";
var map = new AMap.Map('container', {
center: [centerLatitude,centerLongitude],
zoom: 16
});
//公交场站标注信息
var markers = [];
<c:forEach items="${busHubList}" var="busHub">
var marker = new Object();
marker.position=["${busHub.x}", "${busHub.y}"];
marker.content="${busHub.Cotent}";
markers.push(marker);
</c:forEach>
//公交车标注信息
var buses = [];
<c:forEach items="${busList}" var="bus">
var marker = new Object();
marker.number = "${bus.number}";
marker.name = "${bus.name}";
marker.company = "${bus.company}";
marker.line = "${bus.line}";
marker.position=["${bus.x}", "${bus.y}"];
buses.push(marker);
</c:forEach>
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
//缩放控件，显示Zoom值
map.addControl(new BasicControl.Zoom({
position: 'lb',
showZoomNum: true
}));
//图层切换控件
map.addControl(new BasicControl.LayerSwitcher({
position: 'rt'
}));
});
//中心点
AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
map.panTo([105.729085,35.963913]);
});
//公交路线
var lineArrs = [];
<c:forEach items="${busRoutesList}" var="busRoutes">
var lineArr = new Object();
var position=[];
var tx = "${busRoutes.x}".split(",");
var ty = "${busRoutes.y}".split(",");
for (var i=0;i<"${busRoutes.x}".split(",").length - 1;i++)
{
position.push([tx[i],ty[i]]);
}
lineArr.name = "${busRoutes.name}";
lineArr.position = position;
lineArrs.push(lineArr);
</c:forEach>
//创建公交路线
var i=00200;
lineArrs.forEach(function(line) {
//alert(line.position)
//折线
var polyline = new AMap.Polyline({
strokeColor: "#"+i, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
strokeDasharray: [10, 5] //补充线样式
});
i+=50;
polyline.setMap(map);
polyline.setPath(line.position);
});
//添加标记点
AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
//在地图上为每公交场站添加标注信息
markers.forEach(function(marker) {
AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
var marker1 = new SimpleMarker({
//设置节点属性
iconLabel: {
//普通文本
innerHTML: '公交场站',
//设置样式
style: {
color: '#fff',
fontSize: '77%',
marginTop: '2px'
}
},
//直接设置html(需要以"<"开头并且以">"结尾)
iconStyle: '<div style="background:red;width:30px;height:30px;"></div>',
//设置基点偏移
//offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: marker.position
});
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong>'+marker.content+'</strong>',
infoBody: '<p class="my-desc"><strong>'+marker.content+'</strong> <br/> '+marker.content+'</p>',
//基点指向marker的头部位置
offset: new AMap.Pixel(0, -31)
});
function openInfoWin() {
infoWindow.open(map, marker1.getPosition());
}
//marker 点击时打开
AMap.event.addListener(marker1, 'click', function() {
openInfoWin();
});
});
});
buses.forEach(function(marker) {
var marker1 = new AMap.Marker({
map: map,
position: marker.position,
zIndex: 100,
});
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong>公交车信息</strong>',
infoBody: '<p class="my-desc"><strong>车牌号：'+marker.number+'</strong> <br/><br/> <strong>运营司机：'+marker.name+'</strong> <br/><br/> <strong>归属公司：'+marker.company+'</strong> <br/><br/> <strong>运营线路：'+marker.line+'</strong> <br/><br/> <strong>当前位置：'+marker.position+'</strong> <br/><br/> <a href="#">视频查看</a> <a href="${ctx}/tosmp/busTrackPlayback">轨迹回放</a> </p>',
//基点指向marker的头部位置
offset: new AMap.Pixel(0, -31)
});
function openInfoWin() {
infoWindow.open(map, marker1.getPosition());
}
//marker 点击时打开
AMap.event.addListener(marker1, 'click', function() {
openInfoWin();
});
});
});
}
</script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
font-size: 13px;
}
.info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
</style>
</head>
<body>
<div id="container" class="container"></div>
<div class="button-group">
<input id="pantoBtn" type="button" class="button" value="中心点"/>
</div>
</body>
</html>轨迹回放部分
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>轨迹回放</title>
<script src="http://webapi.amap.com/maps?v=1.3&key=63dd2746f7ca2b0bd5242b297e22d50f&callback=init"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="开始动画" id="start"/>
<input type="button" class="button" value="暂停动画" id="pause"/>
<input type="button" class="button" value="继续动画" id="resume"/>
<input type="button" class="button" value="停止动画" id="stop"/>
<a href="xx/xx/loadBusMapInfo" class="button" >返回</a>
</div>
<script>
var marker, lineArr = [];
var map = new AMap.Map("container", {
resizeEnable: true,
center: [105.729085,35.963913],
zoom: 16
});
marker = new AMap.Marker({
map: map,
position: ["${track.x}", "${track.y}"],
icon: "http://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true
});
var tx = "${track.tx}".split(",");
var ty = "${track.ty}".split(",");
for (var i=0;i<"${track.tx}".split(",").length - 1;i++)
{
lineArr.push([tx[i],ty[i]]);
}
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
strokeColor: "#00A", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: map,
// path: lineArr,
strokeColor: "#F00", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
// strokeStyle: "solid" //线样式
});
marker.on('moving',function(e){
passedPolyline.setPath(e.passedPath);
})
map.setFitView();
AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
marker.moveAlong(lineArr, 500);
}, false);
AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
marker.pauseMove();
}, false);
AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
marker.resumeMove();
}, false);
AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
marker.stopMove();
}, false);
</script>
</body>
</html>
后台
@Controller
@RequestMapping(value = "xxx")
public class BusMonitorController extends BaseController {
@Autowired
private BusMonitorService busMonitorService;
/**
* 地图初始化
*
* @param model
* @return
*/
@RequestMapping(value = "loadBusMapInfo")
public String loadBusMapInfo(Model model) {
// 公交场站
List<Map<String, String>> busHubList = busMonitorService.findBusHubList();
model.addAttribute("busHubList", busHubList);
// 公交车
List<Map<String, String>> busList = busMonitorService.findBusList();
model.addAttribute("busList", busList);
// 公交线路
List<Map<String,String>> busRoutesList =
busMonitorService.findBusRoutes();
model.addAttribute("busRoutesList", busRoutesList);
return "busMap";
}
/**
* 轨迹回放
*
* @param model
* @return
*/
@RequestMapping(value = "busTrackPlayback")
public String busTrackPlayback(Model model) {
Map<String, String> track = busMonitorService.findBusTrack();
model.addAttribute("track", track);
return "busTrackPlayback";
}
}
@Service
@Transactional(readOnly = true)
public class BusMonitorService {
@Autowired
public WarningRecordService warningRecordService;
// 所有公交场站
public List<Map<String, String>> findBusHubList() {
ArrayList<Map<String, String>> list = new ArrayList<>();
Map<String, String> busHub = new HashMap<String, String>();
busHub.put("Cotent", "XXX公交场站信息");
busHub.put("x", "105.734014");
busHub.put("y", "35.96336");
Map<String, String> busHub1 = new HashMap<String, String>();
busHub1.put("Cotent", "YYY公交场站信息");
busHub1.put("x", "105.725431");
busHub1.put("y", "35.964576");
list.add(busHub);
list.add(busHub1);
return list;
}
// 所有公交车
public List<Map<String, String>> findBusList() {
ArrayList<Map<String, String>> list = new ArrayList<>();
Map<String, String> bus = new HashMap<String, String>();
bus.put("number", "YY991");
bus.put("name", "李雷");
bus.put("company", "一家公交公司");
bus.put("line", "一号线");
bus.put("x", "105.730383");
bus.put("y", "35.963638");
list.add(bus);
return list;
}
// 轨迹回放
public Map<String, String> findBusTrack() {
Map<String, String> track = new HashMap<String, String>();
track.put("number", "YY991");
track.put("x", "105.730383");
track.put("y", "35.963638");
track.put("tx", "105.723222,105.725947,105.727293,105.727132,105.726467,105.727572,105.729471,105.730383");
track.put("ty", "35.968935,35.968774,35.968714,35.967858,35.965062,35.963855,35.963673,35.963638");
return track;
}
// 公交线路
public List<Map<String, String>> findBusRoutes() {
ArrayList<Map<String, String>> list = new ArrayList<>();
Map<String, String> busRoutes = new HashMap<String, String>();
busRoutes.put("name", "1号线");
busRoutes.put("x",
"105.733892,105.731338,105.731338,105.727132,105.726725,105.724536");
busRoutes.put("y",
"35.966109,35.966143,35.966143,35.966456,35.966595,35.967463");
list.add(busRoutes);
Map<String, String> busRoutes1 = new HashMap<String, String>();
busRoutes1.put("name", "二号线");
busRoutes1.put("x",
"105.733259,105.732143,105.730383,105.729471,105.727572,105.726467,105.727132,105.727293,105.725947,105.723222");
busRoutes1.put("y",
"35.963508,35.963586,35.963638,35.963673,35.963855,35.965062,35.967858,35.968714,35.968774,35.968935");
list.add(busRoutes1);
return list;
}
}
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
