<!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,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.demo-title {
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
h1 {
margin: 0;
color: rgba(255, 255, 255, 0.75);
}
h3 {
font-weight: normal;
margin-top: 5px;
color: rgba(255, 255, 255, 0.75);
}
.start-btn {
position: absolute;
bottom: 20px;
right: 20px;
padding: 0 18px;
height: 30px;
background-color: #1A66FF;
border-radius: 5px;
z-index: 1;
cursor: pointer;
}
.start-btn>a {
color: #fff;
display: block;
height: 100%;
line-height: 30px;
text-align: center;
font-size: 14px;
}
.amap-ani {
width: 44px;
height: 52px;
background: url('https://a.amap.com/Loca/static/loca-v2/demos/images/track_marker.png');
background-size: 44px 52px;
}
</style>
</head>
<body>
<div class="demo-title">
<h1>镜头--北京某地区导航路径追踪</h1>
<h3>使用轨迹追踪能力追踪导航路径</h3>
</div>
<div class="start-btn">
<a>开始镜头追踪</a>
</div>
<div id="map"></div>
<script>
window.movingDraw = true;
</script>
<script
src="https://webapi.amap.com/maps?v=2.1Beta&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
<script>
var map = new AMap.Map('map', {
terrain: true,
viewMode: '3D',
zoom: 13.5,
center: [102.620455, 30.973672],
pitch: 45,
rotation: -90,
showLabel: true,
mapStyle: 'amap://styles/509934ebf66e54cbfe10ccae0056c462',
showBuildingBlock: false,
dragEnable: false,
zoomEnable: false,
});
var loca = window.loca = new Loca.Container({
map,
});
var path = [
[102.620455, 30.973672],
[102.620983, 30.973509],
[102.621572, 30.973171],
[102.62226, 30.972732],
[102.623303, 30.972028],
[102.62407, 30.971587],
[102.624621, 30.971056],
[102.624861, 30.970932],
[102.625467, 30.97074],
[102.625925, 30.970587],
[102.626097, 30.970503],
[102.626244, 30.970378],
[102.626672, 30.969989],
[102.627108, 30.969662],
[102.628539, 30.968951],
[102.629371, 30.968594],
[102.630044, 30.968308],
[102.630641, 30.968114],
[102.631158, 30.968034],
[102.631538, 30.967968],
[102.631821, 30.967853],
[102.632196, 30.967649],
[102.632853, 30.96738],
[102.633672, 30.967171],
[102.633813, 30.967099],
[102.633938, 30.966991],
[102.634014, 30.966863],
[102.634064, 30.966727],
[102.634142, 30.966406],
[102.63411, 30.966188],
[102.633993, 30.965986],
[102.633701, 30.965595],
[102.633654, 30.96545],
[102.633634, 30.965307],
[102.633906, 30.964651],
[102.634166, 30.964221],
[102.634372, 30.964006],
[102.635035, 30.963904],
[102.636576, 30.963516],
[102.637393, 30.96333],
[102.638094, 30.963074],
[102.638532, 30.962883],
[102.638924, 30.962616],
[102.639141, 30.962542],
[102.639412, 30.962503],
[102.63967, 30.962478],
[102.639925, 30.962482],
[102.640288, 30.96258],
[102.640659, 30.962719],
[102.641197, 30.962934],
[102.641476, 30.963002],
[102.641762, 30.963021],
[102.642222, 30.962888],
[102.642626, 30.96264],
[102.642985, 30.962378],
[102.643326, 30.962075],
[102.643653, 30.961789],
[102.644024, 30.961593],
[102.644532, 30.961468],
[102.645027, 30.96138],
[102.645491, 30.961254],
[102.645931, 30.961111],
[102.646739, 30.960731],
[102.647004, 30.960562],
[102.647208, 30.960373],
[102.647478, 30.960075],
[102.64783, 30.959846],
[102.64866, 30.959388],
[102.649214, 30.959111],
[102.649324, 30.959104],
[102.649448, 30.959136],
[102.649636, 30.959244],
[102.649978, 30.959435],
[102.650586, 30.959927],
[102.651241, 30.960866],
[102.651541, 30.961247],
[102.651854, 30.961629],
[102.651992, 30.961874],
[102.652061, 30.96216],
[102.652212, 30.96251],
[102.652274, 30.962605],
[102.652391, 30.962698],
[102.652677, 30.962818],
[102.652839, 30.962866],
[102.653003, 30.962892],
[102.653145, 30.962911],
[102.653428, 30.962889],
[102.654088, 30.962697],
[102.654437, 30.962608],
[102.654778, 30.962586],
[102.655313, 30.962669],
[102.655822, 30.962833],
[102.656613, 30.963273],
[102.657072, 30.963403],
[102.657516, 30.963397],
[102.658151, 30.963362],
[102.658806, 30.963425],
[102.659335, 30.963619],
[102.659791, 30.963887],
[102.660783, 30.964359],
[102.661623, 30.964707],
[102.661992, 30.965069],
[102.662291, 30.965404],
[102.662728, 30.965633],
[102.663677, 30.965807],
[102.664344, 30.965798],
[102.664943, 30.96573],
[102.665439, 30.96574],
[102.666209, 30.965802],
[102.667425, 30.96588],
[102.668039, 30.966025],
[102.668659, 30.966223],
[102.66918, 30.966444],
[102.6696, 30.966667],
[102.670046, 30.96699],
[102.670394, 30.96719],
[102.670772, 30.96735],
[102.671176, 30.967418],
[102.671609, 30.967369],
[102.671969, 30.967289],
[102.672362, 30.967137],
[102.672688, 30.966955],
[102.672871, 30.966818],
[102.67308, 30.966703],
[102.673279, 30.966615],
[102.673473, 30.966577],
[102.673612, 30.966558],
[102.673753, 30.966565],
[102.674032, 30.966614],
[102.674333, 30.966736],
[102.67488, 30.966996],
[102.675116, 30.96709],
[102.675364, 30.967135],
[102.675515, 30.967148],
[102.675658, 30.96713],
[102.676026, 30.96701],
[102.676504, 30.966847],
[102.676681, 30.966786],
[102.676881, 30.966817],
[102.677824, 30.967046],
[102.678406, 30.967105],
[102.679198, 30.967101],
[102.679757, 30.967391],
[102.680209, 30.967791],
[102.680689, 30.968058],
[102.68117, 30.968253],
[102.681791, 30.968409],
[102.682817, 30.968586],
[102.683399, 30.968744],
[102.683736, 30.968969],
[102.683948, 30.969323],
[102.68406, 30.969656],
[102.684255, 30.970039],
[102.684545, 30.970231],
[102.685078, 30.970392],
[102.6866, 30.9705],
[102.688109, 30.970816],
[102.688575, 30.970934],
[102.688725, 30.971077],
[102.688807, 30.971276],
[102.689073, 30.971961],
[102.689334, 30.97225],
[102.690776, 30.973397],
[102.691207, 30.973707],
[102.691853, 30.974017],
[102.692454, 30.974156],
[102.692769, 30.974195],
[102.693341, 30.974248],
[102.694711, 30.974302],
[102.695642, 30.974351],
[102.696004, 30.974386],
[102.696359, 30.974483],
[102.69711, 30.974733],
[102.697494, 30.974742],
[102.698541, 30.974654],
[102.699323, 30.974706],
[102.699846, 30.974773],
[102.700405, 30.974921],
[102.70133, 30.975293],
[102.702067, 30.975762],
[102.702831, 30.976012],
[102.703887, 30.976271],
[102.704883, 30.976444],
[102.705596, 30.976709],
[102.706382, 30.976718],
[102.707474, 30.976666],
[102.708384, 30.97669],
[102.709171, 30.976868],
[102.709552, 30.977001],
[102.70982, 30.97716],
[102.710386, 30.977454],
[102.710748, 30.977593],
[102.711001, 30.977628],
[102.711213, 30.977619],
[102.712274, 30.977373],
[102.713164, 30.977089],
[102.713696, 30.977053],
[102.714385, 30.977106],
[102.714798, 30.977166],
[102.715426, 30.977347],
[102.716309, 30.977593],
[102.717449, 30.977835],
[102.717982, 30.97796],
[102.718493, 30.978033],
[102.719058, 30.978007],
[102.72004, 30.977953],
[102.720769, 30.977866],
[102.721135, 30.977778],
[102.721388, 30.977748],
[102.721628, 30.977754],
[102.72194, 30.97779],
[102.722273, 30.977908],
[102.723238, 30.978362],
[102.723634, 30.978483],
[102.724022, 30.978535],
[102.724612, 30.978435],
[102.725085, 30.978242],
[102.725845, 30.978073],
[102.727159, 30.977852],
[102.728005, 30.977773],
[102.728786, 30.977763],
[102.729269, 30.977671],
[102.729876, 30.977426],
[102.730245, 30.977309],
[102.730555, 30.977282],
[102.731073, 30.977326],
[102.73216, 30.977325],
[102.733195, 30.977231],
[102.735779, 30.976871],
[102.738582, 30.977275],
[102.740012, 30.976898],
[102.740521, 30.976848],
[102.740958, 30.976819],
[102.741357, 30.976882],
[102.741622, 30.976868],
[102.741821, 30.976823],
[102.742036, 30.976752],
[102.742214, 30.976643],
[102.742572, 30.97636],
[102.74308, 30.976153],
[102.743611, 30.976151],
[102.744155, 30.976267],
[102.744654, 30.976415],
[102.745375, 30.976685],
[102.746097, 30.97689],
[102.746959, 30.976965],
[102.748975, 30.977107],
[102.749902, 30.977218],
[102.750443, 30.977322],
[102.750868, 30.977464],
[102.752511, 30.977973],
[102.752808, 30.978017],
[102.753056, 30.978009],
[102.753645, 30.977927],
[102.754184, 30.977794],
[102.754746, 30.977633],
[102.754992, 30.977618],
[102.755201, 30.977671],
[102.755865, 30.978031],
[102.756311, 30.978221],
[102.756602, 30.978282],
[102.756848, 30.978266],
[102.758914, 30.978011],
[102.759204, 30.978051],
[102.759489, 30.978137],
[102.760089, 30.97841],
[102.76072, 30.978469],
[102.761288, 30.978487],
[102.761972, 30.978481],
[102.762671, 30.97839],
[102.762925, 30.978384],
[102.763169, 30.978385],
[102.763585, 30.978389],
[102.764093, 30.978289],
[102.76458, 30.978144],
[102.765056, 30.978006],
[102.765477, 30.977954],
[102.766054, 30.977906],
[102.7665, 30.977904],
[102.76671, 30.977923],
[102.766987, 30.978007],
[102.767203, 30.97812],
[102.76757, 30.978301],
[102.767777, 30.978399],
[102.76785, 30.978416],
[102.767918, 30.978428],
[102.768092, 30.97845],
[102.768422, 30.978471],
[102.769034, 30.978523],
[102.769312, 30.978566],
[102.769548, 30.978618],
[102.769851, 30.978723],
[102.770245, 30.978931],
[102.77052, 30.97899],
[102.771251, 30.979176],
[102.771626, 30.979283],
[102.771927, 30.979356],
[102.772244, 30.97941],
[102.772763, 30.979432],
[102.773154, 30.97944],
[102.773514, 30.979475],
[102.773904, 30.979543],
[102.774222, 30.979628],
[102.774504, 30.979708],
[102.77475, 30.979859],
[102.774966, 30.980015],
[102.775149, 30.980216],
[102.775426, 30.980595],
[102.775902, 30.981345],
[102.776724, 30.981858],
[102.77885, 30.982962],
[102.779973, 30.983804],
[102.780329, 30.984017],
[102.780878, 30.98421],
[102.78147, 30.984486],
[102.781741, 30.984804],
[102.78216, 30.98529],
[102.782825, 30.985779],
[102.783142, 30.986345],
[102.784073, 30.987145],
[102.784673, 30.987339],
[102.785095, 30.987566],
[102.785588, 30.987994],
[102.785982, 30.988373],
[102.786446, 30.988659],
[102.786949, 30.988864],
[102.787373, 30.989142],
[102.788105, 30.989612],
[102.788814, 30.989783],
[102.789653, 30.989923],
[102.790126, 30.990147],
[102.790973, 30.990685],
[102.791625, 30.990791],
[102.792777, 30.990803],
[102.793542, 30.990477],
[102.794021, 30.990399],
[102.795064, 30.990441],
[102.796509, 30.990231],
[102.797863, 30.989926],
[102.799504, 30.990064],
[102.801872, 30.989473],
[102.803936, 30.989014],
[102.805857, 30.988779],
[102.806527, 30.988838],
[102.807179, 30.989045],
[102.808194, 30.989473],
[102.809275, 30.989535],
[102.810476, 30.989457],
[102.811314, 30.989346],
[102.811928, 30.989305],
[102.812595, 30.989299],
[102.813017, 30.989385],
[102.81386, 30.989808],
[102.814743, 30.990133],
[102.815854, 30.990504],
[102.81699, 30.990596],
[102.818488, 30.990301],
[102.819357, 30.990612],
[102.820182, 30.990756],
[102.820941, 30.990714],
[102.821301, 30.990638],
[102.821481, 30.990602],
[102.821662, 30.990601],
[102.821882, 30.990646],
[102.822077, 30.990713],
[102.822348, 30.990833],
[102.82271, 30.991001],
[102.823064, 30.991117],
[102.823453, 30.991151],
[102.82389, 30.991103],
[102.824218, 30.991032],
[102.824698, 30.990864],
[102.824949, 30.990831],
[102.825136, 30.990843],
[102.82537, 30.99086],
[102.825599, 30.99088],
[102.825845, 30.990917],
[102.82612, 30.990978],
[102.826332, 30.991057],
[102.826542, 30.991194],
[102.826742, 30.991378],
[102.826941, 30.991541],
[102.827185, 30.991662],
[102.827422, 30.991753],
[102.827742, 30.991836],
[102.828079, 30.991908],
[102.828339, 30.991998],
[102.828755, 30.99217],
[102.829008, 30.992327],
[102.829194, 30.992545],
[102.829334, 30.992772],
[102.829429, 30.992917],
[102.829611, 30.993071],
[102.829925, 30.993177],
[102.831209, 30.993469],
[102.832315, 30.99383],
[102.834562, 30.994623],
];
// 轨迹
var marker = new AMap.Marker({
position: [102.834562, 30.994623],
content:
'<div class="amap-ani"></div>',
anchor: 'bottom-center',
map: map,
})
var polyline = new AMap.Polyline({
path: [[102.620456, 30.973672], [102.620456, 30.973672]],
isOutline: false,
strokeColor: '#00E98F',
strokeOpacity: 1,
strokeWeight: 16,
strokeStyle: 'solid',
lineJoin: 'round',
lineCap: 'round',
zIndex: 500,
map: map,
});
var finished = false;
function run() {
if (!finished) {
var center = map.getCenter().toArray();
var lastPath = polyline.getPath();
lastPath.push(center);
if(lastPath.length === 1) {
lastPath.push(center);
}
polyline.setPath(lastPath);
marker.setPosition(center);
}
requestAnimationFrame(run);
}
run();
loca.animate.start();
document.querySelector('.start-btn').addEventListener('click', function () {
finished = false;
polyline.setPath([[102.620456, 30.973672], [102.620456, 30.973672]]);
loca.viewControl.addTrackAnimate({
path: path, // 镜头轨迹，二维数组，支持海拔
duration: 120000, // 时长
timing: [[0, 0.3], [1, 0.7]], // 速率控制器
rotationSpeed: 10, // 每秒旋转多少度
}, function () {
finished = true;
console.log('完成');
});
});
</script>
</body>
</html>
