<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高德地图大批量数据（上万）画历史轨迹实现方案</title>
<style>
html,
body,
#container {
100%;
height: 100%;
margin: 0px;
}
#loadingTip {
position: absolute;
z-index: 9999;
top: 0;
right: 0;
padding: 3px 10px;
background: red;
color: #fff;
font-size: 13px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=54a512472d8c31ba2f9c851b5236d5df'></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', {
resizeEnable: true,
zoom: 18,
center:[120.020496763587,29.202602899862274],
mapStyle:'amap://styles/dark',
// zoom: 4
});
map.on('click',e=>{
console.log(e);
});
let pathList={
"list1":[
[120.018225,29.203249],
[120.019089,29.203277],
[120.019131,29.202809],
[120.018531,29.202256],
[120.017715,29.202542],
[120.017662,29.202954],
[120.019314,29.20309],
[120.018912,29.202495],
[120.018037,29.201793],
[120.017544,29.201868],
[120.019099,29.202102],
[120.017694,29.202491],
[120.016814,29.202547],
[120.017978,29.202214],
[120.018407,29.202645],
[120.018246,29.203174],
],
"list2":[
[120.0215589183569,29.203178858048272],
[120.022116817832,29.20295409426316],
[120.02178958833218,29.20244837394471],
[120.0214516299963,29.20220956070484],
[120.02111367166043,29.202476469583413],
[120.02156428277493,29.20274806036053],
[120.02107075631619,29.20281361664718],
[120.02087763726712,29.202340673925015],
],
"list3":[
[120.01987587779757,29.202045668943786],
[120.02044450610873,29.201521213547608],
[120.01954864829776,29.201137235574073],
[120.01951646178958,29.20168042350507],
[120.02017628520724,29.20168042350507],
[120.0209702190757,29.201029534176868],
[120.01944135993722,29.20106699554525],
[120.01970421642062,29.201460339086758],
[120.02041231960055,29.201137235574073],
],
}
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
var pathSimplifierIns2 = 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;
}
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
renderAllPointsIfNumberBelow: -1, //绘制路线节点，如不需要可设置为-1
pathLineStyle: { //路线样式设置
lineWidth: 3,
strokeStyle: '#0091FF',
borderWidth: 0,
// borderStyle: '#eeeeee',
dirArrowStyle: false
},
// startPointStyle: { //起点
// radius: 4,
// fillStyle: '#109618',
// lineWidth: 1,
// strokeStyle: '#eeeeee',
// },
// endPointStyle: { //终点
// radius: 4,
// fillStyle: '#dc3912',
// lineWidth: 1,
// strokeStyle: '#eeeeee'
// },
}
});
window.pathSimplifierIns = pathSimplifierIns2;
//设置数据，模拟路线数据
pathSimplifierIns2.setData([
{
name: '路线1',
path: pathList.list1,
},
{
name: '路线2',
path: pathList.list2,
},
{
name: '路线3',
path: pathList.list3,
},
]);
//对第一条线路（即索引 0）创建一个巡航器
for(let i=0;i<3;i++){
let navg1 = pathSimplifierIns2.createPathNavigator(i, {
// loop: true, //循环播放
speed: 500, //巡航速度，单位千米/小时
pathNavigatorStyle: {
44,
height: 54,
//使用图片
content: PathSimplifier.Render.Canvas.getImageContent("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.jpg", onload, onerror),
strokeStyle: null,
fillStyle: null,
//经过路径的样式
pathLinePassedStyle: {
lineWidth: 3,
strokeStyle: '#53E19F',
}
}
});
navg1.start();
}
// pathSimplifierIns2.setData([]);
});
// var stmarker = new AMap.Marker({
// map: map,
// position: [120.018225,29.203249], //基点位置
// icon: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605073831460&di=6187250d41f02b38753bebaa9f773a8d&imgtype=0&src=http%3A%2F%2Fac-q.static.booking.cn%2Fimages%2Fhotel%2Fmax1024x768%2F111%2F111145520.jpg",
// zIndex: 10
// });
</script>
</body>
</html>