|
|
<!doctype html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 强制以Chrome内核渲染页面（针对IE等浏览器的兼容设置） -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
|
<!-- 配置视口：初始缩放1.0、禁止用户缩放、宽度适配设备宽度 -->
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
|
<style>
|
|
|
/* 重置html、body和容器的样式：宽度高度100%、外边距0 */
|
|
|
html,
|
|
|
body,
|
|
|
#container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0px;
|
|
|
}
|
|
|
/* 加载提示框样式：绝对定位、层级9999、背景红色、白色文字等 */
|
|
|
#loadingTip {
|
|
|
position: absolute;
|
|
|
z-index: 9999;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
padding: 3px 10px;
|
|
|
background: red;
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
</style>
|
|
|
<!-- 页面标题：运动轨迹 -->
|
|
|
<title>运动轨迹</title>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 地图容器 -->
|
|
|
<div id="container"></div>
|
|
|
<!-- 引入高德地图JS API -->
|
|
|
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.4&key=9c89950bdfbcecd46f814309384655cd'></script>
|
|
|
<!-- UI组件库 1.0 -->
|
|
|
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
|
|
|
<script type="text/javascript">
|
|
|
//创建地图
|
|
|
var map = new AMap.Map('container', {
|
|
|
zoom: 4
|
|
|
});
|
|
|
|
|
|
// 加载路径简化器（PathSimplifier）和jQuery类库
|
|
|
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
|
|
|
|
|
|
if (!PathSimplifier.supportCanvas) {
|
|
|
alert('当前环境不支持 Canvas！');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
//just some colors
|
|
|
var colors = [
|
|
|
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
|
|
|
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
|
|
|
"#651067", "#329262", "#5574a6", "#3b3eac"
|
|
|
];
|
|
|
// 初始化路径简化器实例
|
|
|
var pathSimplifierIns = new PathSimplifier({
|
|
|
zIndex: 100,
|
|
|
//autoSetFitView:false,
|
|
|
map: map, //所属的地图实例
|
|
|
|
|
|
getPath: function (pathData, pathIndex) {
|
|
|
|
|
|
return pathData.path;
|
|
|
},
|
|
|
getHoverTitle: function (pathData, pathIndex, pointIndex) {
|
|
|
|
|
|
if (pointIndex >= 0) {
|
|
|
//point
|
|
|
return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
|
|
|
}
|
|
|
// hover 到轨迹线时，显示“名称, 点数量：总点数”
|
|
|
return pathData.name + '，点数量' + pathData.path.length;
|
|
|
},
|
|
|
renderOptions: {
|
|
|
pathLineStyle: {
|
|
|
dirArrowStyle: true
|
|
|
},
|
|
|
// 自定义路径样式（根据缩放级别和索引动态设置颜色、线宽）
|
|
|
getPathStyle: function (pathItem, zoom) {
|
|
|
|
|
|
var color = colors[pathItem.pathIndex % colors.length],
|
|
|
lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));
|
|
|
|
|
|
return {
|
|
|
pathLineStyle: {
|
|
|
strokeStyle: color,
|
|
|
lineWidth: lineWidth
|
|
|
},
|
|
|
pathLineSelectedStyle: {
|
|
|
lineWidth: lineWidth + 2
|
|
|
},
|
|
|
pathNavigatorStyle: {
|
|
|
fillStyle: color
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
// 将路径简化器实例暴露到window，方便调试
|
|
|
window.pathSimplifierIns = pathSimplifierIns;
|
|
|
|
|
|
$('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
|
|
|
// 从后端接口获取轨迹数据（带日期参数）
|
|
|
$.getJSON('/owntracks/get_datas?date={{ date }}', function (d) {
|
|
|
|
|
|
if (!d || !d.length) {
|
|
|
$("#loadingTip").text("没有数据...")
|
|
|
return;
|
|
|
}
|
|
|
$('#loadingTip').remove();
|
|
|
pathSimplifierIns.setData(d);
|
|
|
|
|
|
//initRoutesContainer(d);
|
|
|
|
|
|
function onload() {
|
|
|
pathSimplifierIns.renderLater();
|
|
|
}
|
|
|
|
|
|
function onerror(e) {
|
|
|
alert('图片加载失败！');
|
|
|
}
|
|
|
// 遍历每条轨迹，创建导航器并启动自动播放
|
|
|
d.forEach(function (item, index) {
|
|
|
var navg1 = pathSimplifierIns.createPathNavigator(index, {
|
|
|
loop: true,
|
|
|
speed: 1000,
|
|
|
});
|
|
|
|
|
|
navg1.start();
|
|
|
})
|
|
|
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
|
|
|
</html> |
