前言:标题说了是匀速移动的小车,那么速度就是m/s,地图坐标系是以米为单位的投影坐标系,而不该是经纬度的地理坐
标系,虽然地理坐标和投影坐标可以相互转换。该案例的小车速度设定的是45m/100ms,地图区域是青岛。。。
操作说明:
1、打开页面,单击右上角“绘制路线”,在地图上绘制一条折线。
2、单击“开始移动”,小车由起点匀速运动到终点。(在移动过程中或者匀速到终点后,重复单击“开始移动”,小车
从头开始移动)。
3、在单击“绘制路线”,重复 步骤1和步骤2。
页面效果:
核心代码:
deltaX=0;
deltaY=0;
startIdx=0;
endIdx=1;
clearInterval(timer);
carLyr.clear();
curPosition=new Point(points[0][0],points[0][1],map.spatialReference);
var vec ={x:points[endIdx][0]-points[startIdx][0],y:points[endIdx][1]-points[startIdx][1]};
var tmpAngle=Math.atan2(vec.y,vec.x);
angle=(tmpAngle-Math.PI/2)/Math.PI*180;
var picSymbol = new PictureMarkerSymbol({
"url":"img/car.png",
"height":32,
"width":18,
"type":"esriPMS",
"angle": angle,
});
carGraphic=new Graphic(curPosition,picSymbol);
carLyr.add(carGraphic);
timer=setInterval(function () {
if (deltaX!=0||deltaY!=0){
curPosition=new Point(curPosition.x+deltaX,curPosition.y+deltaY,map.spatialReference);
if (points[endIdx][0]>points[startIdx][0]&&curPosition.x>points[endIdx][0]) {
changeDir()
}else if(points[endIdx][0]<points[startIdx][0]&&curPosition.x<points[endIdx][0]){
changeDir()
}else if(points[endIdx][1]>points[startIdx][1]&&curPosition.y>points[endIdx][1]){
changeDir()
}else if(points[endIdx][1]<points[startIdx][1]&&curPosition.y<points[endIdx][1]){
changeDir()
}
var picSymbol = new PictureMarkerSymbol({
"url":"img/car.png",
"height":32,
"width":18,
"type":"esriPMS",
"angle": angle,
});
carGraphic.setGeometry(curPosition)
carGraphic.setSymbol(picSymbol)
}else {
curPosition=new Point(curPosition.x+deltaX,curPosition.y+deltaY,map.spatialReference);
var vec ={x:points[endIdx][0]-points[startIdx][0],y:points[endIdx][1]-points[startIdx][1]};
var tmpAngle=Math.atan2(vec.y,vec.x);
deltaX=Math.cos(tmpAngle)*speed;
deltaY=Math.sin(tmpAngle)*speed;
angle=(tmpAngle-Math.PI/2)/Math.PI*180;
var picSymbol = new PictureMarkerSymbol({
"url":"img/car.png",
"height":32,
"width":18,
"type":"esriPMS",
"angle": angle,
});
carGraphic.setGeometry(curPosition)
carGraphic.setSymbol(picSymbol)
}
},100)
完整案例:https://download.csdn.net/download/shijie_nihao/11634510