1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>轨迹移动</title>
    6.     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    7.     <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css"/>
    8.     <script src="https://js.arcgis.com/4.17/"></script>
    9. </head>
    10. <style>
    11.     html, body, #mapContainer {
    12.         margin: 0px auto;
    13.         padding: 0px;
    14.         width: 100%;
    15.         height: 100%;
    16.     }
    18.     .btn {
    19.         position: absolute;
    20.         top: 5%;
    21.         right: 2%;
    22.     }
    23. </style>
    24. <body>
    25. <div id="mapContainer"></div>
    26. <div class="btn">
    27.     <button id="start">开始</button>
    28.     <button id="pause">暂停</button>
    29.     <button id="continue">继续</button>
    30.     <button id="back">返回</button>
    31. </div>
    32. </body>
    33. <script>
    34.     require([
    35.         'esri/Map',
    36.         'esri/views/MapView',
    37.         'esri/layers/FeatureLayer',
    38.         'esri/layers/GraphicsLayer',
    39.         "esri/Graphic",
    40.         "dojo/domReady!"
    41.     ], function (Map, MapView, FeatureLayer, GraphicsLayer, Graphic) {
    42.         var map = new Map({
    43.             basemap: 'satellite'
    44.         });
    45.         var view = new MapView({
    46.             container: 'mapContainer',
    47.             center: [115.22908458010747, 32.636000827586614],
    48.             zoom: 11,
    49.             map: map
    50.         });
    51.         view.when(function () {
    52.             view.on('click', function (evt) {
    53.                 console.log(evt)
    54.                 console.log(view)
    55.             })
    56.         })
    58.         const polyline = {
    59.             type: 'polyline',
    60.             paths: [
    61.                 [115.21947154300005,32.735979284000052],
    62.                 [115.22809709000001, 32.746389426000064],
    63.                 [115.24980967100009, 32.749958617000061],
    64.                 [115.26616846600007, 32.749363752000079],
    65.                 [115.29739889100006, 32.74876888700004],
    66.                 [115.3241678280001, 32.746686858000032],
    67.                 [115.33398310400003, 32.737763880000045],
    68.                 [115.33130621100008, 32.713374404000035],
    69.                 [115.32089606900001, 32.699395071000026],
    70.                 [115.28279788700002, 32.69116676200008],
    71.                 [115.22660992600004, 32.703856560000077],
    72.                 [115.20162558600009, 32.705046291000031],
    73.                 [115.18913341600012, 32.69047209200005],
    74.                 [115.19567693300007, 32.66994924100004],
    75.                 [115.20251788400003, 32.66459545400005],
    76.                 [115.25516345900007, 32.657457071000067],
    77.                 [115.35809497600007, 32.659182180000073],
    78.                 [115.36332979000008, 32.647760767000079],
    79.                 [115.34572177900009, 32.639670600000045],
    80.                 [115.29622899000003, 32.63015275600003],
    81.                 [115.22056213000008, 32.633959893000053],
    82.                 [115.18344253800001, 32.62682151000007],
    83.                 [115.17154523300007, 32.603502792000029],
    84.                 [115.18058718500004, 32.583991212000058],
    85.                 [115.20628536400011, 32.575425152000037],
    86.                 [115.26719956500006, 32.575425152000037],
    87.                 [115.30669861800004, 32.574473368000042],
    88.                 [115.36095032900005, 32.584942997000041],
    89.                 [115.38807618500005, 32.611117068000055],
    90.                 [115.39664224400008, 32.630628648000027],
    91.                 [115.39664224400008, 32.673934838000037],
    92.                 [115.3885520770001, 32.702488370000026],
    93.                 [115.38093780200006, 32.755788297000038],
    94.                 [115.38046190900002, 32.77625166100006],
    95.                 [115.36190211400003, 32.794811457000037],
    96.                 [115.30527094200011, 32.808612331000063],
    97.                 [115.22436926700004, 32.809564115000057],
    98.                 [115.14489527000001, 32.793383781000045],
    99.                 [115.10254086400005, 32.760547219000046],
    100.                 [115.0863605290001, 32.727710657000046],
    101.                 [115.08160160700004, 32.694398203000048],
    102.                 [115.09207123500005, 32.64918844400006],
    103.                 [115.1030167560001, 32.631104540000024],
    104.                 [115.14584705400011, 32.64490541400005],
    105.                 [115.16250328100011, 32.635863462000032],
    106.                 [115.14203991700003, 32.610165283000072],
    107.                 [115.11538995300009, 32.588750134000065],
    108.                 [115.11824530700005, 32.558293033000041],
    109.                 [115.14299170100003, 32.537353776000032],
    110.                 [115.19533984300006, 32.530691286000035],
    111.                 [115.27433794900003, 32.530691286000035],
    112.                 [115.31526467800006, 32.544492159000072],
    113.                 [115.32716198300011, 32.579708182000047],
    114.                 [115.32145127600006, 32.61206885200005],
    115.                 [115.27528973300002, 32.623490265000044],
    116.                 [115.24340495500007, 32.632532217000062],
    117.                 [115.19914698100001, 32.657754503000035],
    118.                 [115.17154523300007, 32.674886623000077],
    119.                 [115.16821398800005, 32.684880359000033],
    120.                 [115.17344880200005, 32.701536586000032],
    121.                 [115.20485768700007, 32.714385675000074],
    122.                 [115.15393722200008, 32.741035639000074],
    123.                 [115.12395601300011, 32.727710657000046],
    124.                 [115.12205244400002, 32.71057853800005],
    125.                 [115.13918456300007, 32.711054430000047],
    126.                 [115.15917203600009, 32.722951735000038],
    127.                 [115.17297291000011, 32.739132070000039],
    128.                 [115.18820146000007, 32.74341510000005],
    129.                 [115.21947154300005, 32.735979284000052]
    130.             ],
    131.             // spatialReference: view.spatialReference
    132.         }
    134.         //初始化路线符号
    135.         var lineSymbol = {
    136.             type: 'cim',
    137.             data: {
    138.                 type: 'CIMSymbolReference',
    139.                 symbol: {
    140.                     type: 'CIMLineSymbol',
    141.                     symbolLayers: [{
    142.                         //箭头符号
    143.                         type: 'CIMVectorMarker',
    144.                         enable: true,
    145.                         size: 4,
    146.                         markerPlacement: {
    147.                             type: 'CIMMarkerPlacementAlongLineSameSize',
    148.                             endings: 'WithMarkers',
    149.                             placementTemplate: [100]    //箭头距离
    150.                         },
    151.                         frame: {
    152.                             xmin: -5,
    153.                             ymin: -5,
    154.                             xmax: 5,
    155.                             ymax: 5
    156.                         },
    157.                         //箭头图形
    158.                         markerGraphics: [{
    159.                             type: "CIMMarkerGraphic",
    160.                             geometry: {
    161.                                 rings: [
    162.                                     [
    163.                                         [-8, -5.47],
    164.                                         [-8, 5.6],
    165.                                         [1.96, -0.03],
    166.                                         [-8, -5.47]
    167.                                     ]
    168.                                 ]
    169.                             },
    170.                             symbol: {
    171.                                 //箭头的颜色填充
    172.                                 type: 'CIMPolygonSymbol',
    173.                                 symbolLayers: [{
    174.                                     type: 'CIMSolidFill',
    175.                                     enable: true,
    176.                                     color: [238, 238, 238, 255]
    177.                                 }]
    178.                             }
    179.                         }]
    180.                     }, {
    181.                         //线符号
    182.                         type: 'CIMSolidStroke',
    183.                         enable: true,
    184.                         width: 3,
    185.                         color: [103, 165, 245, 255]
    186.                     }]
    187.                 }
    188.             }
    189.         }
    192.         //已行驶的路线符号
    193.         var lineSymboled = {
    194.             type: 'cim',
    195.             data: {
    196.                 type: 'CIMSymbolReference',
    197.                 symbol: {
    198.                     type: 'CIMLineSymbol',
    199.                     symbolLayers: [{
    200.                         //箭头符号
    201.                         type: 'CIMVectorMarker',
    202.                         enable: true,
    203.                         size: 4,
    204.                         markerPlacement: {
    205.                             type: 'CIMMarkerPlacementAlongLineSameSize',
    206.                             endings: 'WithMarkers',
    207.                             placementTemplate: [100]    //箭头距离
    208.                         },
    209.                         frame: {
    210.                             xmin: -5,
    211.                             ymin: -5,
    212.                             xmax: 5,
    213.                             ymax: 5
    214.                         },
    215.                         //箭头图形
    216.                         markerGraphics: [{
    217.                             type: "CIMMarkerGraphic",
    218.                             geometry: {
    219.                                 rings: [
    220.                                     [
    221.                                         [-8, -5.47],
    222.                                         [-8, 5.6],
    223.                                         [1.96, -0.03],
    224.                                         [-8, -5.47]
    225.                                     ]
    226.                                 ]
    227.                             },
    228.                             symbol: {
    229.                                 //箭头的颜色填充
    230.                                 type: 'CIMPolygonSymbol',
    231.                                 symbolLayers: [{
    232.                                     type: 'CIMSolidFill',
    233.                                     enable: true,
    234.                                     color: [238, 238, 238, 255]
    235.                                 }]
    236.                             }
    237.                         }]
    238.                     }, {
    239.                         //线符号
    240.                         type: 'CIMSolidStroke',
    241.                         enable: true,
    242.                         width: 3,
    243.                         color: [254, 166, 0, 255]
    244.                     }]
    245.                 }
    246.             }
    247.         }
    248.         var lineLaye = new GraphicsLayer({
    249.             id: 'lineLaye'
    250.         })
    251.         map.add(lineLaye);
    252.         lineLaye.add(new Graphic({
    253.             geometry: polyline,
    254.             symbol: lineSymbol
    255.         }));
    257.         //已跑过的路线图层
    258.         var lineLayed = new GraphicsLayer({
    259.             id: 'lineLayed'
    260.         })
    261.         map.add(lineLayed);
    263.         //创建起点
    264.         var startP = {
    265.             type: 'point',
    266.             longitude: 115.21947154300005,
    267.             latitude: 32.735979284000052
    268.         }
    269.         var startS = {
    270.             type: 'picture-marker',
    271.             url: 'http://47.110.79.226:8384/img/fj.png',
    272.             width: '32px',
    273.             height: '32px'
    274.         }
    276.         var moveLayer = new GraphicsLayer({
    277.             id: 'moveLayer'
    278.         })
    279.         map.add(moveLayer);
    280.         let moveGra = new Graphic({
    281.             geometry: startP,
    282.             symbol: startS
    283.         });
    284.         moveLayer.add(moveGra);
    287.         var startNum, endNum, moving;
    289.         function move(start, end) {
    290.             let x1 = polyline.paths[start][0];
    291.             let y1 = polyline.paths[start][1];
    292.             let x2 = polyline.paths[end][0];
    293.             let y2 = polyline.paths[end][1];
    294.             //斜率
    295.             let p = (y2 - y1) / (x2 - x1);
    296.             //速度
    297.             let v = 0.001;
    298.             moving = setInterval(function () {
    299.                 startNum = start;
    300.                 endNum = end;
    301.                 //分别计算 x,y轴的方向和速度
    302.                 if (Math.abs(p) == Number.POSITIVE_INFINITY) {//垂直的时候斜率无穷大
    303.                     moveGra.geometry.y += v;
    304.                 } else {
    305.                     if (x2 < x1) {
    306.                         moveGra.geometry.x -= (1 / Math.sqrt(1 + p * p)) * v;
    307.                         moveGra.geometry.y -= (p / Math.sqrt(1 + p * p)) * v;
    308.                         //计算角度
    309.                         moveGra.symbol.angle = calcAngle(x1, y1, x2, y2);//(Math.PI / 2 - Math.atan(p)) * 180 / Math.PI+180
    310.                     } else {
    311.                         moveGra.geometry.x += (1 / Math.sqrt(1 + p * p)) * v;
    312.                         moveGra.geometry.y += (p / Math.sqrt(1 + p * p)) * v;
    313.                         //计算角度
    314.                         moveGra.symbol.angle = calcAngle(x1, y1, x2, y2);
    315.                     }
    316.                 }
    317.                 //重新绘制
    318.                 moveLayer.add(moveGra);
    319.                 //画线
    320.                 if(start==0){
    321.                     addLineSYmboled(0);
    322.                 }else{
    323.                     addLineSYmboled(end);
    324.                 }
    325.                 console.log(Math.abs(moveGra.geometry.x - x2))
    326.                 if (Math.abs(moveGra.geometry.x - x2) <= v && Math.abs(moveGra.geometry.y - y2) <= v) {
    327.                     clearInterval(moving);
    328.                     startNum = start++;
    329.                     endNum = end++;
    330.                     if (end < polyline.paths.length) {
    331.                         move(start, end);
    332.                     }
    333.                 }
    334.             }, 50)
    335.         }
    337.         function calcAngle(x1, y1, x2, y2) {
    338.             let tan = Math.atan(Math.abs((y2 - y1) / (x2 - x1))) * 180 / Math.PI + 90;
    339.             if (x2 > x1 && y2 > y1) {
    340.                 return -tan + 180;
    341.             } else if (x2 > x1 && y2 < y1) {
    342.                 return tan;
    343.             } else if (x2 < x1 && y2 > y1) {
    344.                 return tan - 180;
    345.             } else {
    346.                 return -tan;
    347.             }
    348.         }
    350.         function addLineSYmboled(end) {
    351.             lineLayed.removeAll();
    352.             let path=null;
    353.             if(end==0){
    354.                 path = polyline.paths.slice(0, 1);
    355.             }else{
    356.                 path = polyline.paths.slice(0, end);
    357.             }
    358.             path.push(
    359.                 [moveGra.geometry.x,moveGra.geometry.y]
    360.             )
    361.             let polylined = {
    362.                 type: 'polyline',
    363.                 paths:path,
    364.                 // spatialReference: view.spatialReference
    365.             };
    366.             lineLayed.add(new Graphic({
    367.                 geometry: polylined,
    368.                 symbol: lineSymboled
    369.             }));
    370.         }
    372.         $(':button').click(function () {
    373.             let value = $(this).attr('id');
    374.             switch (value) {
    375.                 case 'start': {
    376.                     //开始
    377.                     if (moving != undefined) {
    378.                         clearInterval(moving); //清除移动
    379.                     }
    380.                     moveGra.geometry = startP;
    381.                     console.log(moveGra.geometry)
    382.                     move(0, 1);
    383.                     lineLayed.removeAll();
    384.                     break;
    385.                 }
    386.                 case 'pause': {
    387.                     //暂停
    388.                     clearInterval(moving);
    389.                     break;
    390.                 }
    391.                 case 'continue': {
    392.                     if (moving != undefined) {
    393.                         clearInterval(moving); //清除移动
    394.                     }
    395.                     move(startNum, endNum);
    396.                     break;
    397.                 }
    398.                 case'back' : {
    399.                     if (moving != undefined) {
    400.                         clearInterval(moving); //清除移动
    401.                     }
    402.                     lineLayed.removeAll();
    403.                     moveGra.geometry = startP;
    404.                     moveGra.symbol.angle = 0;
    405.                     break;
    406.                 }
    407.             }
    408.         })
    409.     })
    410. </script>
    411. </html>