3d视图不支持轨迹展示!!!
但是我还是试了一下,添加俯视角度之后轨迹展示不出来,将下面代码直接复制到高德的示例里面点击开始巡航可以直接看效果
<!-- 重点参数:renderOptions -->
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址://webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/navigators.html -->
<base href="//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>轨迹巡航控制</title>
<style>
#container,
body,
html {
height: 100%;
width: 100%
}
#loadingTip,
#panel {
position: absolute;
top: 0
}
body,
html {
margin: 0;
font-size: 12px
}
#outer-box {
height: 100%;
padding-right: 300px;
}
#panel {
right: 0;
width: 300px;
z-index: 999;
height: calc(100% - 5px);
overflow: hidden;
overflow-y: auto
}
#routes-container {
height: 1200px;
margin-left: 10px
}
#loadingTip {
z-index: 9999;
left: 0;
padding: 3px 10px;
background: red;
color: #fff;
font-size: 13px
}
.route-item {
margin-bottom: 10px
}
.route-item pre {
margin: 0
}
.route-item h3 {
margin: 5px 0;
font-size: 14px;
cursor: pointer
}
.hide {
display: none
}
.speedBox {
padding: 5px 0
}
.speedRange {
vertical-align: middle;
margin: 0;
padding: 0;
width: 100px
}
.markerInfo {
background: rgba(255, 255, 255, 0.7);
padding: 2px 5px;
border: 1px solid #ccc;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="outer-box">
<div id="container">
</div>
<div id="panel">
<div id="routes-container">
</div>
</div>
</div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
//添加移动动画
AMap.plugin('AMap.MoveAnimation', function () {
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
center: [103.81025,25.45394],
zoom: 20,
viewMode: '3D', //开启3D视图,默认为关闭
pitch: 55.94919957310569, //俯视角度,添加这个参数轨迹展示不出来
rotation: -0.7908261543741522,
buildingAnimation: true, //楼块出现是否带动画
});
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;
}
return pathData.name + ',点数量' + pathData.path.length;
},
renderOptions: {
pathLineStyle: {
dirArrowStyle: true
},
getPathStyle: function(pathItem, zoom) {
var color = colors[pathItem.pathIndex],
lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));
return {
pathLineStyle: {
strokeStyle: color,
lineWidth: lineWidth
},
pathLineSelectedStyle: {
lineWidth: lineWidth + 2
},
pathNavigatorStyle: {
fillStyle: color
}
}
}
}
});
var pathNavigs = [];
function getNavg(pathIndex) {
if (!pathNavigs[pathIndex]) {
//创建一个轨迹巡航器
var navgtr = pathSimplifierIns.createPathNavigator(pathIndex, {
loop: true,
speed: parseInt($('#speedInp_' + pathIndex).val()),
pathNavigatorStyle: {
autoRotate: true,
}
});
var $markerContent = $('<div class="markerInfo"></div>');
$markerContent.html(pathSimplifierIns.getPathData(pathIndex).name);
navgtr.marker = new AMap.Marker({
offset: new AMap.Pixel(12, -10),
content: $markerContent.get(0),
map: map
});
var $msg = $('#routes-container').find('div.route-item[data-idx="' +
pathIndex + '"]').find('.msg');
navgtr.on('move', function() {
navgtr.marker.setPosition(navgtr.getPosition());
//设置地图中心点跟随
map.setCenter(navgtr.marker.getPosition())
//设置视图角度
map.setRotation(-navgtr.marker.getOrientation())
});
navgtr.onDestroy(function() {
pathNavigs[pathIndex] = null;
navgtr.marker.setMap(null);
$msg.html('');
});
navgtr.on('start resume', function() {
navgtr._startTime = Date.now();
navgtr._startDist = this.getMovedDistance();
});
navgtr.on('stop pause', function() {
navgtr._movedTime = Date.now() - navgtr._startTime;
navgtr._movedDist = this.getMovedDistance() - navgtr._startDist;
navgtr._realSpeed = (navgtr._movedDist / navgtr._movedTime * 3600);
var msgInfo = {
'状态': this.getNaviStatus(),
'设定速度': this.getSpeed() + ' km/h',
'总行进距离': Math.round(this.getMovedDistance() / 1000) + ' km',
'本段行进距离': Math.round(navgtr._movedDist / 1000) + ' km',
'本段耗时': (navgtr._movedTime / 1000) + ' s',
'本段实际速度': Math.round(navgtr._realSpeed) + ' km/h'
};
$msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');
refreshNavgButtons();
});
navgtr.on('move', function() {
var msgInfo = {
'状态': this.getNaviStatus(),
'设定速度': this.getSpeed() + ' km/h',
'总行进距离': Math.round(this.getMovedDistance() / 1000) + ' km'
};
$msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');
});
pathNavigs[pathIndex] = navgtr;
}
return pathNavigs[pathIndex];
}
var navigBtnsConf = [{
name: '开始巡航',
action: 'start',
enableExp: 'navgStatus === "stop" || navgStatus === "pause"'
}, {
name: '暂停',
action: 'pause',
enableExp: 'navgStatus === "moving"'
}, {
name: '恢复',
action: 'resume',
enableExp: 'navgStatus === "pause"'
}, {
name: '停止',
action: 'stop',
enableExp: 'navgStatus === "moving"'
}, {
name: '销毁',
action: 'destroy',
enableExp: 'navgExists'
}];
function refreshNavgButtons() {
$('#routes-container').find('div.route-item').each(function() {
var pathIndex = parseInt($(this).attr('data-idx'), 0);
if (pathIndex < 0) {
return;
}
var navgStatus = 'stop',
navgExists = !!pathNavigs[pathIndex];
if (navgExists) {
navgStatus = pathNavigs[pathIndex].getNaviStatus();
}
$(this).find('.navigBtn').each(function() {
var btnIdx = parseInt($(this).attr('data-btnIdx'));
$(this).prop('disabled', !eval(navigBtnsConf[btnIdx].enableExp));
});
});
}
function initRoutesContainer(data) {
$('#routes-container').on('click', '.navigBtn', function() {
var pathIndex = parseInt($(this).closest('.route-item').attr('data-idx'), 0);
var navg = getNavg(pathIndex);
navg[$(this).attr('data-act')]();
refreshNavgButtons();
});
for (var i = 0, len = data.length; i < len; i++) {
initRouteItem(data[i], i);
}
refreshNavgButtons();
}
function initRouteItem(pathData, idx) {
var $routeItem = $('<div class="route-item"></div>');
$routeItem.attr('data-idx', idx);
$('<h3/>').css({
color: colors[idx]
}).html(pathData.name + '(点数: ' + pathData.path.length + ')').appendTo($routeItem).on('click', function() {
pathSimplifierIns.setSelectedPathIndex(idx);
});
for (var i = 0, len = navigBtnsConf.length; i < len; i++) {
$('<button class="navigBtn" data-btnIdx="' + i + '" data-act="' + navigBtnsConf[i].action + '"></button>').html(navigBtnsConf[i].name).appendTo($routeItem);
}
$speedBox = $('<div class="speedBox"></div>').appendTo($routeItem);
var speedTxt = $('<span><span>').appendTo($speedBox);
var speedRangeInput = $('<input id="speedInp_' + idx +
'" class="speedRange" type="range" min="1000" max="1000000" step="1000" value="100000" />').appendTo($speedBox);
function updateSpeedTxt() {
var speed = parseInt(speedRangeInput.val(), 10);
speedTxt.html('时速:' + speed + ' km/h');
if (pathNavigs[idx]) {
pathNavigs[idx].setSpeed(speed);
}
}
speedRangeInput.on('change', updateSpeedTxt);
updateSpeedTxt();
$speedBox.appendTo($routeItem);
$('<div class="msg"></div>').appendTo($routeItem);
$routeItem.appendTo('#routes-container');
}
window.pathSimplifierIns = pathSimplifierIns;
$('<div id="loadingTip">加载数据,请稍候...</div>').appendTo(document.body);
$.getJSON('https://a.amap.com/amap-ui/static/data/big-routes.json', function(d) {
$('#loadingTip').remove();
var flyRoutes = [];
for (var i = 0, len = d.length; i < len; i++) {
if (d[i].name.indexOf('乌鲁木齐') >= 0) {
d.splice(i, 0, {
name: '飞行 - ' + d[i].name,
path: PathSimplifier.getGeodesicPath(
d[i].path[0], d[i].path[d[i].path.length - 1], 100)
});
i++;
len++;
}
}
d.push.apply(d, flyRoutes);
pathSimplifierIns.setData(d);
initRoutesContainer(d);
// for (var i = 0, len = d.length; i < 2; i++) {
// (function(i) {
// setTimeout(function() {
// getNavg(i).start();
// refreshNavgButtons();
// }, 1000 * (i + 1));
// })(i);
// }
});
pathSimplifierIns.on('selectedPathIndexChanged', function(e, info) {
});
pathSimplifierIns.on('pointClick pointMouseover pointMouseout', function(e, record) {
//console.log(e.type, record);
});
pathSimplifierIns.on('pathClick pathMouseover pathMouseout', function(e, record) {
//console.log(e.type, record);
});
});
});
</script>
</body>
</html>
各位客官要是感觉有用的话能留个小心心嘛,谢谢啦!!!^ v ^