參考：
說明：
這裏採用的是參考二中的方案一：
調用arcgis自己的api，設置定時器，一段時間清空當前點，繪製下一個點。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>移動軌跡</title>
<script src="https://js.arcgis.com/4.11/"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script src="./path.js"></script>
</body>
</html>
path.js如下：
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function (Map, MapView, Graphic, GraphicsLayer) {
var map = new Map({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [110.4906068300, 24.7766251500],
zoom: 16
});
$.get('https://www.easy-mock.com/mock/5cb5cfc4d7dd0a5c6904fe0e/ys/path', function (res) {
var data = res.data
var paths = data.transferLine
var pathLayer = new GraphicsLayer()
for (var i = 0; i < paths.length; i++) {
// 繪製起點
var startPoint = paths[i].paths[0]
var point1 = {
type: 'point',
longitude: startPoint[0],
latitude: startPoint[1]
}
var markerSymbol = {
type: "picture-marker", // autocasts as new SimpleMarkerSymbol()
url: "./img/frompoint.png",
width: 16,
height: 16
}
var startPointGraphic = new Graphic({
geometry: point1,
symbol: markerSymbol
})
pathLayer.add(startPointGraphic)
// 繪製終點
var stopPoint = paths[i].paths[paths[i].paths.length - 1]
var point2 = {
type: 'point',
longitude: stopPoint[0],
latitude: stopPoint[1]
}
var stopMarkerSymbol = {
type: "picture-marker", // autocasts as new SimpleMarkerSymbol()
url: "./img/topoint.png",
width: 16,
height: 16
}
var stopPointGraphic = new Graphic({
geometry: point2,
symbol: stopMarkerSymbol
})
pathLayer.add(stopPointGraphic)
// 繪製轉移路線
var polyline = {
type: paths[i].type,
paths: paths[i].paths
}
var polylineSymbol = {
type: 'simple-line',
color: [226, 119, 40],
width: 4
}
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol
})
var moveLayer = new GraphicsLayer({
id: 'moveLayer_' + i
})
map.add(moveLayer)
pathLayer.add(polylineGraphic)
drawMoving(0, 1, paths[i].paths, moveLayer)
}
map.add(pathLayer)
})
// 動態繪製移動的軌跡
var drawMoving = function (startIndex, stopIndex, paths, moveLayer, graphic) {
var endIndex = paths.length
if (stopIndex < endIndex) {
// moveLayer.removeAll();
var startX = paths[startIndex][0];
var startY = paths[startIndex][1];
var stopX = paths[stopIndex][0];
var stopY = paths[stopIndex][1];
// 斜率
var p = (stopY - startY) / (stopX - startX);
// 偏移量
var v = 0.00005;
if (!graphic) {
var people = {
type: 'point',
longitude: paths[startIndex][0],
latitude: paths[startIndex][1]
}
var peopleSimpleMark = {
type: 'picture-marker',
url: './img/people.png',
width: 24,
height: 24
}
graphic = new Graphic({
geometry: people,
symbol: peopleSimpleMark
})
// moveLayer.add(graphic)
}
// 定時器
var moving = setInterval(function () {
// debugger;
// 起點下標
startNum = startIndex;
// 終點下標
stopNum = stopIndex;
var newX;
var newY;
// 分別計算x，y軸上的偏移後的座標
if (Math.abs(p) === Number.POSITIVE_INFINITY) {
// 斜率的絕對值爲無窮大，斜率不存在，即x軸方向上的偏移量爲0
stopY > startY ? newY = graphic.geometry + v : newY = graphic.geometry - v;
newX = graphic.geometry.x;
} else {
if (stopX < startX) {
newX = graphic.geometry.x - (1 / Math.sqrt(1 + p * p)) * v;
newY = graphic.geometry.y - (p / Math.sqrt(1 + p * p)) * v;
} else {
newX = graphic.geometry.x + (1 / Math.sqrt(1 + p * p)) * v;
newY = graphic.geometry.y + (p / Math.sqrt(1 + p * p)) * v;
}
}
// 判斷是否開始進行下一段軌跡移動
if ((graphic.geometry.x - stopX) * (newX - stopX) < 0 || (graphic.geometry.y - stopY) * (newY - stopY) < 0) {
// 可以開始下一段軌跡移動
graphic.geometry.x = stopX;
graphic.geometry.y = stopY;
clearInterval(moving);
startIndex++;
stopIndex++;
if (stopNum < endIndex) {
console.log(`第${startIndex}步`)
drawMoving(startIndex, stopIndex, paths, moveLayer, graphic)
}
} else {
// graphic.geometry.longitude = newX;
// graphic.geometry.latitude = newY;
// console.log(graphic)
var people = {
type: 'point',
longitude: newX,
latitude: newY
}
var peopleSimpleMark = {
type: 'picture-marker',
url: './img/people.png',
width: 32,
height: 32
}
graphic = new Graphic({
geometry: people,
symbol: peopleSimpleMark
})
moveLayer.graphics = [graphic]
}
}, 50);
}
//
}
});
實現效果：
