EN
全部下载
地图跟随动画
源码
打开
编辑
复制
index.html
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>动画 - 地图跟随动画</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
    .pane{background:#34495e;line-height:28px;color:#fff;z-index:10;position:absolute;top:20px;right:20px}
    .pane a{display:block;color:#fff;text-align:left;padding:0 10px;min-width:28px;min-height:28px;float:left}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/turf.min.js"></script>
    <div id="map" class="container"></div>
    <div class="pane"><a href="javascript:start();">start</a></div>

    <script>
      var center = new maptalks.Coordinate(118.846825, 32.046534);
      var map = new maptalks.Map('map', {
        center: center,
        zoom: 18,
        seamlessZoom: true,
        pitch: 65,
        // centerCross: true,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate:
            'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
          subdomains: ['a', 'b', 'c', 'd'],
          attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
        })
      });

      var layer = new maptalks.VectorLayer('layer', {
        hitDetect: true,
        geometryEvents: true
      }).addTo(map);

      var coordiantes = [
        [120.543189862389, 31.35322014824814],
        [120.54391551057267, 31.35371261270089],
        [120.54506885867931, 31.354451304544426],
        [120.54587139673674, 31.35501763102789],
        [120.54707760663155, 31.355752208849054],
        [120.54825017720657, 31.356441639795918],
        [120.54965341740296, 31.357237762100084],
        [120.55118160364418, 31.35791076744991],
        [120.55261854668379, 31.358306813092582],
        [120.55456885954129, 31.35892438695859],
        [120.55632947631534, 31.359855802165697],
        [120.55739651678448, 31.360529047629626],
        [120.5583272131937, 31.361237721856668],
        [120.55895558146995, 31.36169835723942],
        [120.55950095770982, 31.361779347842656],
        [120.55989220588185, 31.36172872872382],
        [120.56026567004596, 31.361506004277174],
        [120.56086439830915, 31.36083276580959],
        [120.56180695072362, 31.359830492091845],
        [120.56218041488785, 31.359309103054073],
        [120.56241753499216, 31.3585295451185],
        [120.56237028513135, 31.357949524158727],
        [120.5621203930416, 31.357165719008975],
        [120.56187530656894, 31.35647218963217],
        [120.56165424818187, 31.355721202348974],
        [120.56164944256477, 31.355355965928624],
        [120.56182244478077, 31.35513436111691],
        [120.56208675372181, 31.354957897652554],
        [120.56249523117617, 31.354933274817228],
        [120.56287968054517, 31.355052285128153],
        [120.56336024225618, 31.355191814266362],
        [120.56383599835021, 31.355323135619102],
        [120.56411823174483, 31.35531370115811],
        [120.56451108319175, 31.355280752400773],
        [120.56493901066062, 31.355160938640353],
        [120.56587203284698, 31.35481347787183],
        [120.56675594860246, 31.354516937062584],
        [120.56843258245613, 31.353986755709315],
        [120.5700145110502, 31.35345956676693],
        [120.57178585016345, 31.352935370285905],
        [120.57333270273546, 31.352519006427343],
        [120.57448319625848, 31.35221646750327],
        [120.57551793890877, 31.351985818362692],
        [120.57763653064012, 31.351494563762202],
        [120.57919390601887, 31.351198012486947],
        [120.5809512147232, 31.350868509973196],
        [120.58295054797964, 31.35057195672377],
        [120.58502354088239, 31.350356281045975],
        [120.58627224726706, 31.350224478999365],
        [120.5874823700276, 31.350122631836854],
        [120.59152584231651, 31.349856304834162],
        [120.59430413211135, 31.349902525810847],
        [120.59755148381964, 31.349917932798093],
        [120.60048312077856, 31.3501798511941],
        [120.60473173926357, 31.350534210215955],
        [120.60818656066442, 31.350811533736504],
        [120.61173158627935, 31.350981008818707],
        [120.6170265736481, 31.35100411903349],
        [120.62201486668891, 31.350826940574763],
        [120.62405348192806, 31.35069598236899],
        [120.62905561628952, 31.350032419603707],
        [120.62990839532642, 31.34993531589643],
        [120.63024516959456, 31.34983613848371],
        [120.63079647383688, 31.349739949917847],
        [120.63147819413666, 31.349577947900315],
        [120.63169753023317, 31.349400757874122],
        [120.63182201828783, 31.349142566095594],
        [120.63175088225648, 31.34888943621283],
        [120.6315908261862, 31.348656556118982],
        [120.63120550601684, 31.34852999060874],
        [120.63087946587348, 31.34858061683329],
        [120.63070755379783, 31.348707182275376],
        [120.6305178577145, 31.348975500449427],
        [120.63038744165715, 31.349532384782577],
        [120.63034594563885, 31.350043702948568],
        [120.63042300967277, 31.350641081047087],
        [120.63066012977697, 31.351096705859646],
        [120.63095060190471, 31.351552328464862],
        [120.63118772200892, 31.351921887401176],
        [120.63168515539405, 31.35219880544568],
        [120.63248920420028, 31.352608017684105],
        [120.63305772355818, 31.35296867784163],
        [120.63374806849276, 31.353377886729987],
        [120.63403232817177, 31.35341950109344],
        [120.63426785761999, 31.35342643681892],
        [120.63443841342746, 31.353502729765154],
        [120.63498256767002, 31.35356515122058],
        [120.63552415947902, 31.353532455415092],
        [120.63596182529568, 31.35347320158391],
        [120.63661298663283, 31.35320883788225],
        [120.63707733938963, 31.3529216833642],
        [120.6373708957301, 31.352620853881007],
        [120.63744561916224, 31.35236104582563],
        [120.63738157050614, 31.352114911216376],
        [120.63717341237384, 31.351914356613946],
        [120.63692255513729, 31.35184598562907],
        [120.63660764924475, 31.351841427561652],
        [120.63636746678435, 31.35201463396865],
        [120.63623403208419, 31.352383836034647],
        [120.63633544245636, 31.352689224302623],
        [120.63650090148462, 31.3529216833642],
        [120.63683181954116, 31.353199721879236],
        [120.63742426961016, 31.35367375286191],
        [120.63899989912761, 31.35481832702638],
        [120.64019378977923, 31.355581242410636],
        [120.64162320987919, 31.3566631845234],
        [120.64244421131548, 31.357355036087455],
        [120.64279521271169, 31.357767168817503],
        [120.64328515216039, 31.35848527456139],
        [120.64376046655104, 31.359652965234176],
        [120.64456769613616, 31.363272225986208],
        [120.64494602107004, 31.36555252186676],
        [120.64581813599784, 31.36849036625327],
        [120.6465155185075, 31.370868523138512]
      ];
      var markerFile =
        'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIHN0eWxlPSJ3aWR0aDogMWVtO2hlaWdodDogMWVtO3ZlcnRpY2FsLWFsaWduOiBtaWRkbGU7ZmlsbDogY3VycmVudENvbG9yO292ZXJmbG93OiBoaWRkZW47IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMS43MzY1NzYgNzI0LjA3MDRhNDIyLjQgNDIyLjQgMCAwIDEgMC01OTkuODA4YzE2Ni42NTYtMTY1LjY4MzIgNDM2LjgxMjgtMTY1LjY4MzIgNjAzLjQ0MzIgMGE0MjIuNCA0MjIuNCAwIDAgMSAwIDU5OS44MzM2TDUwMy40NTgxNzYgMTAyNCAyMDEuNzYyMTc2IDcyNC4wNzA0eiIgZmlsbD0iIzE1NzZFOCIgLz48cGF0aCBkPSJNNTAzLjQ4Mzc3NiA0MjYuNjc1Mm0tMzYyLjY3NTIgMGEzNjIuNjc1MiAzNjIuNjc1MiAwIDEgMCA3MjUuMzUwNCAwIDM2Mi42NzUyIDM2Mi42NzUyIDAgMSAwLTcyNS4zNTA0IDBaIiBmaWxsPSIjRkZGRkZGIiAvPjxwYXRoIGQ9Ik0zOTkuNzI2OTc2IDQzMS40ODhjLTI4LjIxMTIgMC00Ni4zODcyLTIyLjUyOC00MC40MjI0LTUwLjA5OTJsMjQuNDIyNC05OS43Mzc2YzUuOTY0OC0yNy41NzEyIDMzLjkyLTUwLjEyNDggNjIuMTMxMi01MC4xMjQ4aDIyNi40NTc2YzI4LjIxMTIgMCA1NC43MzI4IDIyLjgwOTYgNTguOTMxMiA1MC42ODhsMTYuODQ0OCA5OC41NmM0LjIyNCAyNy45MDQtMTUuNDExMiA1MC43MTM2LTQzLjYyMjQgNTAuNzEzNkgzOTkuNzI2OTc2eiIgZmlsbD0iIzIxNzdEQyIgLz48cGF0aCBkPSJNMzk5LjcyNjk3NiA0MjIuNTI4Yy0xMC44OCAwLTIwLjEyMTYtNC4wNDQ4LTI2LjAzNTItMTEuMzkyLTUuOTM5Mi03LjMyMTYtNy45MzYtMTcuMjI4OC01LjYzMi0yNy44NTI4LTAuMDI1NiAwLjI1NiAyNC4zNzEyLTk5LjUwNzIgMjQuMzcxMi05OS41MDcyIDUuMTItMjMuNTUyIDI5LjU2OC00My4yNjQgNTMuNDI3Mi00My4yNjRoMjI2LjQ1NzZjMjMuNjI4OCAwIDQ2LjU0MDggMTkuNzEyIDUwLjA3MzYgNDMuMDU5MmwxNi44NzA0IDk4LjczOTJjMS42MTI4IDEwLjcwMDgtMS4xMDA4IDIwLjg2NC03LjYyODggMjguNDQxNi02LjUyOCA3LjYwMzItMTYuMTc5MiAxMS43NzYtMjcuMTM2IDExLjc3NkgzOTkuNzAxMzc2eiBtMzA0Ljc2OCAxNy45MmMxNi4yODE2IDAgMzAuNzcxMi02LjM3NDQgNDAuNzU1Mi0xNy45OTY4IDkuOTg0LTExLjU5NjggMTQuMTU2OC0yNi44OCAxMS42OTkyLTQzLjAwOGwtMTYuODQ0OC05OC43MTM2Yy00LjgzODQtMzItMzUuMjUxMi01OC4xNjMyLTY3Ljc4ODgtNTguMTYzMmgtMjI2LjQ1NzZjLTMyLjI1NiAwLTY0LjA3NjggMjUuNjUxMi03MC45MTIgNTcuMTY0OGwtMjQuMzcxMiA5OS41MzI4Yy0zLjUzMjggMTYuMjU2LTAuMjU2IDMxLjQ4OCA5LjEzOTIgNDMuMTYxNiA5LjM2OTYgMTEuNjIyNCAyMy41Nzc2IDE4LjA0OCAzOS45ODcyIDE4LjA0OEg3MDQuNTIwNTc2eiIgZmlsbD0iIzE1NThBNiIgLz48cGF0aCBkPSJNMjY4LjM5ODk3NiA1NTUuNzUwNHMtMjcuMzkyLTAuMDc2OC0zOS4wMTQ0LTAuMTUzNmMtMTEuNTcxMi0wLjA3NjgtMjAuOTkyLTEwLjU3MjgtMjAuODg5Ni0yMy4yOTZsMC4zODQtNDIuMjE0NCAwLjIwNDgtMjYuMTEyYzAtMjQuNzgwOCAyMC4zMjY0LTQwLjQ0OCA0Ni4yMDgtNDYuMjg0OGw5My4xMzI4LTE5LjQ1Nmg0MDcuMzIxNmMxMi4wMzIgNC4yNzUyIDUwLjY4OCA1LjA2ODggNTAuNjg4IDUzLjQ3ODRsMC42OTEyIDg0LjIyNGEyMi43ODQgMjIuNzg0IDAgMCAxLTIyLjkzNzYgMjIuOTg4OGwtMjMuMzk4NC0wLjE1MzYiIGZpbGw9IiMyMTc3REMiIC8+PHBhdGggZD0iTTQzMS4xODkzNzYgMzY2LjQxMjhjLTIwLjYwOCAwLTIxLjA5NDQtMTYuOTIxNi0xNi43MTY4LTM3LjU4MDhsNS4wNDMyLTI3LjU0NTZjNS44MTEyLTI3LjQ5NDQgMjMuMzcyOC0zNy41ODA4IDQ1LjQ0LTM3LjU4MDhoMTkxLjg0NjRjMjcuMzE1MiAwIDM3LjUyOTYgMTcuMTAwOCA0MC42MjcyIDM4LjAxNmw0LjYwOCAyNi42NDk2YzMuMDcyIDIwLjkxNTIgMS40MzM2IDM4LjA0MTYtMTkuMiAzOC4wNDE2aC0yNTEuNjQ4eiIgZmlsbD0iI0FBREJGNyIgLz48cGF0aCBkPSJNNDMxLjIxNDk3NiAzNTcuNDI3MmMtNC4wMTkyIDAtNi43MDcyLTAuNzkzNi04LjAxMjgtMi40MDY0LTEuODQzMi0yLjI3ODQtMy4zMjgtOC4zNDU2IDAuMDUxMi0yNC4zNDU2bDUuMDY4OC0yNy43NzZjNC4zNTItMjAuNTU2OCAxNi0zMC4yMDggMzYuNjA4LTMwLjIwOGgxOTEuODk3NmMxOC44NDE2IDAgMjguNjIwOCA5LjM0NCAzMS43MTg0IDMwLjMzNmw0LjYzMzYgMjYuODhjMS44OTQ0IDEyLjggMS4zMDU2IDIxLjI0OC0xLjc2NjQgMjQuODMyLTAuNTg4OCAwLjY0LTIuMzI5NiAyLjY4OC04LjU3NiAyLjY4OGgtMjUxLjY0OHogbTI1MS42MjI0IDE3Ljk0NTZjOS42IDAgMTcuMDQ5Ni0yLjk5NTIgMjIuMTY5Ni04LjkwODggOC44NTc2LTEwLjI5MTIgNy44MDgtMjYuNDQ0OCA1Ljg4OC0zOS4zOTg0bC00LjYzMzYtMjYuODhjLTUuNTI5Ni0zNy41Mjk2LTI5Ljk1Mi00NS40NC00OS40MzM2LTQ1LjQ0aC0xOTEuODcyYy0yOC44NzY4IDAtNDguMTI4IDE1Ljg3Mi01NC4yMjA4IDQ0LjY5NzZsLTUuMDk0NCAyNy43NzZjLTIuNjYyNCAxMi42NzItNC43MzYgMjguOCAzLjYzNTIgMzkuMTQyNCA0Ljg2NCA1Ljk5MDQgMTIuMjM2OCA5LjAzNjggMjEuOTM5MiA5LjAzNjhsMjUxLjYyMjQtMC4wMjU2eiIgZmlsbD0iIzQ0NDQ2MSIgLz48cGF0aCBkPSJNMjQxLjU3MDE3NiA1MTkuNTAwOGwwLjIwNDgtMjUuNTc0NGMwLTI0LjIxNzYgMTkuODY1Ni0zOS41MDA4IDQ1LjE4NC00NS4yMzUybDgyLjQ4MzItMTcuMjI4OCA0MDYuOTEyLTEuNzkyYzQuMDk2IDEuNDg0OCAxMS40OTQ0IDIuNTM0NCAxOS4zMDI0IDUuMzUwNC04LjgwNjQtMjguMzEzNi0zNy4wNDMyLTI5LjQ0LTQ2Ljg5OTItMzIuOTIxNkgzNTAuNDcyNTc2bC05MS4wODQ4IDE4Ljk5NTJjLTI1LjM0NCA1LjczNDQtNDUuMTg0IDIxLjA0MzItNDUuMTg0IDQ1LjI2MDhsLTAuMjA0OCAyNS41NDg4LTAuMzg0IDQwLjMyYy0wLjA3NjggMTIuNDY3MiA5LjExMzYgMjIuNzA3MiAyMC40Mjg4IDIyLjc4NGw3LjE2OCAwLjA1MTIgMC4zNTg0LTM1LjU4NHoiIGZpbGw9IiNDOUUyRkYiIG9wYWNpdHk9Ii40NCIgLz48cGF0aCBkPSJNMzU1LjM4Nzc3NiAzOTguMjU5MmgzOTcuNjcwNHYxNjEuMzMxMkgzNTUuMzg3Nzc2di0xNjEuMzMxMnoiIGZpbGw9IiNGMEYwRkYiIC8+PHBhdGggZD0iTTc1My4wNTgxNzYgNTUwLjYzMDRIMzU1LjM4Nzc3Nmw4Ljk2IDguOTZ2LTE2MS4zMzEybC04Ljk2IDguOTZoMzk3LjY3MDRsLTguOTYtOC45NnYxNjEuMzMxMmw4Ljk2LTguOTZ6IG0wLTE2MS4zNTY4SDM0Ni40Mjc3NzZ2MTc5LjMwMjRoNDE1LjYxNnYtMTc5LjMwMjRoLTguOTg1NnoiIGZpbGw9IiMxNTU4QTYiIC8+PHBhdGggZD0iTTI2OC40MjQ1NzYgNTQ2Ljc2NDhsLTM4Ljk2MzItMC4xMjhjLTYuNTUzNi0wLjA3NjgtMTIuMDMyLTYuNjA0OC0xMi4wMDY0LTE0LjI4NDhsMC40MDk2LTQyLjIxNDQgMC4xNzkyLTI2LjExMmMwLTI1LjkwNzIgMjcuNDQzMi0zNC45MTg0IDM5LjIxOTItMzcuNTgwOGw5My4wMDQ4LTE5LjQwNDhhOS4wMTEyIDkuMDExMiAwIDAgMS0xLjg0MzIgMC4yMDQ4aDQwNy4zMjE2YTkuMDYyNCA5LjA2MjQgMCAwIDEtMi45OTUyLTAuNTEyYzIuMjI3MiAwLjc2OCA0Ljc4NzIgMS4zODI0IDcuNzMxMiAyLjA0OCAxNS42MTYgMy43MTIgMzYuOTY2NCA4LjcyOTYgMzYuOTY2NCA0Mi45MzEybDAuNjkxMiA4NC4yNzUyYTEzLjcyMTYgMTMuNzIxNiAwIDAgMS04LjU1MDQgMTIuOTUzNiAxMy44MjQgMTMuODI0IDAgMCAxLTUuMzc2IDEuMDI0bC0yMy4zNzI4LTAuMTUzNmE4Ljk2IDguOTYgMCAwIDAtOC4zNzEyIDEyLjMzOTIgOC45ODU2IDguOTg1NiAwIDAgMCA4LjI0MzIgNS42MDY0bDIzLjM5ODQgMC4xNTM2YTMxLjUzOTIgMzEuNTM5MiAwIDAgMCAyMi43MDcyLTkuMzQ0IDMxLjUzOTIgMzEuNTM5MiAwIDAgMCA5LjI5MjgtMjIuNzA3MmwtMC42OTEyLTg0LjE5ODRjMC00OC4zNTg0LTM1LjU4NC01Ni43Mjk2LTUwLjc5MDQtNjAuMzEzNi0yLjM1NTItMC41NjMyLTQuNTU2OC0xLjA3NTItNS44ODgtMS41MzZhOC45MzQ0IDguOTM0NCAwIDAgMC0yLjk5NTItMC41MTJoLTQwNy4yOTZhOS4wMTEyIDkuMDExMiAwIDAgMC0xLjg0MzIgMC4xNzkybC05My4xNTg0IDE5LjQzMDRjLTMzLjQ1OTIgNy41Nzc2LTUzLjM1MDQgMjguMTYtNTMuMzUwNCA1NS4wNGwtMC4xNzkyIDI2LjA4NjQtMC40MDk2IDQyLjIxNDRjLTAuMTAyNCAxNy42NjQgMTMuMjYwOCAzMi4yMDQ4IDI5LjgyNCAzMi4zMDcybDM5LjA0IDAuMTUzNmE5LjAxMTIgOS4wMTEyIDAgMCAwIDguNTc2LTEyLjQ0MTYgOC45ODU2IDguOTg1NiAwIDAgMC04LjUyNDgtNS41MDR6IiBmaWxsPSIjMTU1OEE2IiAvPjxwYXRoIGQ9Ik00MDMuMDI5Mzc2IDU2Ni4yNzJoMTk1LjY4NjRhOC45NiA4Ljk2IDAgMSAwIDAtMTcuOTcxMmgtMTk1LjY4NjRhOC45NiA4Ljk2IDAgMCAwIDAgMTcuOTQ1NnoiIGZpbGw9IiM2RTZFOTYiIC8+PHBhdGggZD0iTTgxOS43MjA1NzYgNTQ3LjIyNTZjMCA3LjA0LTUuNzYgMTIuOC0xMi44IDEyLjhIMjA1LjI0Mzc3NmExMi44NTEyIDEyLjg1MTIgMCAwIDEtMTIuOC0xMi44di0yNS4yNDE2YzAtNy4wNCA1Ljc2LTEyLjggMTIuOC0xMi44SDgwNi45MjA1NzZjNy4wNjU2IDAgMTIuOCA1Ljc2IDEyLjggMTIuOHYyNS4yNDE2eiIgZmlsbD0iI0YwRjBGRiIgLz48cGF0aCBkPSJNODEwLjc2MDU3NiA1NDcuMjI1NmMwIDIuMDczNi0xLjc5MiAzLjg0LTMuODQgMy44NEgyMDUuMjQzNzc2YTMuODkxMiAzLjg5MTIgMCAwIDEtMy44NC0zLjg0di0yNS4yNDE2YzAtMi4wNDggMS43NjY0LTMuODQgMy44NC0zLjg0aDYwMS42MjU2YzIuMDk5MiAwIDMuODQgMS43OTIgMy44NCAzLjg0djI1LjI0MTZ6IG0xNy45Mi0yNS4yNDE2YTIxLjgxMTIgMjEuODExMiAwIDAgMC0yMS43Ni0yMS43NkgyMDUuMjQzNzc2YTIxLjgxMTIgMjEuODExMiAwIDAgMC0yMS43ODU2IDIxLjc2djI1LjI0MTZjMCAxMi4wMzIgOS43NzkyIDIxLjc4NTYgMjEuNzg1NiAyMS43ODU2aDYwMS42MjU2YzEyLjAzMiAwIDIxLjc4NTYtOS43NTM2IDIxLjc4NTYtMjEuNzZ2LTI1LjI2NzJ6IiBmaWxsPSIjMTU1OEE2IiAvPjxwYXRoIGQ9Ik0xOTIuNDQzNzc2IDUzNi4wODk2aDYyMy41MzkydjE3Ljk0NTZIMTkyLjQ0Mzc3NnYtMTcuOTJ6IiBmaWxsPSIjNkU2RTk2IiBvcGFjaXR5PSIuMTUiIC8+PHBhdGggZD0iTTI2OC4wOTE3NzYgNTU2LjU0NGE2OC4wOTYgNjguMDk2IDAgMSAwIDEzNi4xNDA4IDAgNjguMDk2IDY4LjA5NiAwIDAgMC0xMzYuMTQwOCAweiIgZmlsbD0iI0YwRjBGRiIgLz48cGF0aCBkPSJNMzM2LjE2MjE3NiA1MDMuODMzNmMyOS4wNTYgMCA1Mi43MTA0IDIzLjY1NDQgNTIuNzEwNCA1Mi43MTA0IDAgMTQuMDgtNS40Nzg0IDI3LjMxNTItMTUuNDM2OCAzNy4yNDhhNTIuMzI2NCA1Mi4zMjY0IDAgMCAxLTM3LjI3MzYgMTUuNDM2OCA1Mi43NjE2IDUyLjc2MTYgMCAwIDEtNTIuNzEwNC01Mi42ODQ4YzAtMjkuMDU2IDIzLjY1NDQtNTIuNzEwNCA1Mi43MTA0LTUyLjcxMDR6IG0tODMuNDU2IDUyLjcxMDRBODMuNTU4NCA4My41NTg0IDAgMCAwIDMzNi4xMzY1NzYgNjQwYTgzLjU1ODQgODMuNTU4NCAwIDAgMCA4My40NTYtODMuNDU2IDgzLjU1ODQgODMuNTU4NCAwIDAgMC04My40NTYtODMuNDU2IDgzLjU1ODQgODMuNTU4NCAwIDAgMC04My40NTYgODMuNDU2eiIgZmlsbD0iIzNEM0Q1OCIgLz48cGF0aCBkPSJNMzMzLjM3MTc3NiA1MzAuNjg4YzI2LjQxOTIgMCA0OC41ODg4IDE4LjE1MDQgNTQuNzU4NCA0Mi42NDk2YTU2LjQ0OCA1Ni40NDggMCAxIDAtMTA5LjUxNjggMCA1Ni40OTkyIDU2LjQ5OTIgMCAwIDEgNTQuNzU4NC00Mi42NDk2eiIgZmlsbD0iIzZFNkU5NiIgb3BhY2l0eT0iLjE1IiAvPjxwYXRoIGQ9Ik0zMTYuMjcwOTc2IDU1Ny40OTEyYTE4LjUwODggMTguNTA4OCAwIDEgMCAzNy4wMTc2IDAgMTguNTA4OCAxOC41MDg4IDAgMCAwLTM3LjAxNzYgMHoiIGZpbGw9IiM0MzQzNjAiIC8+PHBhdGggZD0iTTYxMS4zMTA5NzYgNTU2LjU0NGE2OC4wOTYgNjguMDk2IDAgMSAwIDEzNi4xNjY0IDAgNjguMDk2IDY4LjA5NiAwIDAgMC0xMzYuMTkyIDB6IiBmaWxsPSIjRjBGMEZGIiAvPjxwYXRoIGQ9Ik02NzkuMzgxMzc2IDUwMy44MzM2YzI5LjA4MTYgMCA1Mi43MzYgMjMuNjU0NCA1Mi43MzYgNTIuNzEwNCAwIDE0LjA4LTUuNTA0IDI3LjMxNTItMTUuNDYyNCAzNy4yNDhhNTIuMzI2NCA1Mi4zMjY0IDAgMCAxLTM3LjI0OCAxNS40MzY4IDUyLjc2MTYgNTIuNzYxNiAwIDAgMS01Mi43MzYtNTIuNjg0OGMwLTI5LjA1NiAyMy42NTQ0LTUyLjcxMDQgNTIuNzM2LTUyLjcxMDR6IG0tODMuNDU2IDUyLjcxMDRhODMuNTU4NCA4My41NTg0IDAgMCAwIDgzLjQ1NiA4My40NTYgODMuNTU4NCA4My41NTg0IDAgMCAwIDgzLjQ4MTYtODMuNDU2IDgzLjU1ODQgODMuNTU4NCAwIDAgMC04My40NTYtODMuNDU2IDgzLjU1ODQgODMuNTU4NCAwIDAgMC04My40NTYgODMuNDU2eiIgZmlsbD0iIzNEM0Q1OCIgLz48cGF0aCBkPSJNNjc2LjU5MDk3NiA1MzAuNjg4YzI2LjQxOTIgMCA0OC41ODg4IDE4LjE1MDQgNTQuNzU4NCA0Mi42NDk2YTU2LjQ5OTIgNTYuNDk5MiAwIDAgMC01NC43ODQtNzAuMjk3NiA1Ni40NzM2IDU2LjQ3MzYgMCAwIDAtNTQuNzMyOCA3MC4yOTc2IDU2LjQ5OTIgNTYuNDk5MiAwIDAgMSA1NC43NTg0LTQyLjY0OTZ6IiBmaWxsPSIjNkU2RTk2IiBvcGFjaXR5PSIuMTUiIC8+PHBhdGggZD0iTTY1OS40OTAxNzYgNTU3LjQ5MTJhMTguNTA4OCAxOC41MDg4IDAgMSAwIDM2Ljk5MiAwIDE4LjUwODggMTguNTA4OCAwIDAgMC0zNi45OTIgMHoiIGZpbGw9IiM0MzQzNjAiIC8+PHBhdGggZD0iTTIwOC42NzQxNzYgNDYzLjg3Mmg0MC42MDE2djQ1LjMxMkgyMDguNjQ4NTc2di00NS4zMTJ6IiBmaWxsPSIjRkZGRjAwIiAvPjxwYXRoIGQ9Ik0yNDkuMjc1Nzc2IDUxOC4xNDRIMjA4LjY5OTc3NmE4Ljk2IDguOTYgMCAwIDEtOC45ODU2LTguOTZ2LTQ1LjMxMmE4Ljk2IDguOTYgMCAwIDEgOC45Ni04Ljk2aDQwLjYwMTZhOC45NiA4Ljk2IDAgMCAxIDguOTYgOC45NnY0NS4zMTJhOC45NiA4Ljk2IDAgMCAxLTguOTYgOC45NnogbS0zMS42MTYtMTcuOTJoMjIuNjMwNHYtMjcuMzkyaC0yMi42MzA0djI3LjM5MnoiIGZpbGw9IiMzRDNENTgiIC8+PHBhdGggZD0iTTc1NC45NTI1NzYgNDYyLjE4MjRoNTAuMTI0OHY0Ny4wMDE2SDc1NC45NTI1NzZ2LTQ3LjAwMTZ6IiBmaWxsPSIjRkY3NTc1IiAvPjxwYXRoIGQ9Ik04MDUuMDc3Mzc2IDUxOC4xNDRINzU0Ljk1MjU3NmE4Ljk4NTYgOC45ODU2IDAgMCAxLTguOTYtOC45NnYtNDcuMDAxNmE4Ljk2IDguOTYgMCAwIDEgOC45Ni04Ljk2aDUwLjEyNDhhOC45NiA4Ljk2IDAgMCAxIDguOTYgOC45NnY0Ny4wMDE2YTguOTYgOC45NiAwIDAgMS04Ljk2IDguOTZ6IG0tNDEuMTM5Mi0xNy45MmgzMi4xNzkydi0yOS4wODE2SDc2My45MTI1NzZ2MjkuMDU2eiIgZmlsbD0iIzNEM0Q1OCIgLz48cGF0aCBkPSJNMzY0LjU1MjU3NiA0MDcuMjQ0OGgzNzkuNTJ2MzQuMzU1MkgzNjQuNTc4MTc2di0zNC4zNTUyeiIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iLjY4IiAvPjxwYXRoIGQ9Ik0zNTguOTQ2MTc2IDQ3NC4xMzc2aDM4NS4xNTJ2MzUuMDQ2NEgzNTguOTcxNzc2VjQ3NC4xMTJ6IiBmaWxsPSIjNkU2RTk2IiBvcGFjaXR5PSIuMTUiIC8+PHBhdGggZD0iTTU1Mi42NjEzNzYgMjYzLjY4aDE3LjkydjEwMi43MDcyaC0xNy45MnYtMTAyLjY4MTZ6IiBmaWxsPSIjNDQ0NDYxIiAvPjxwYXRoIGQ9Ik00MzAuMjkzMzc2IDI5NS42OGgyNTYuNzY4bC0xMS4zNDA4LTI4LjQxNmgtMjMwLjg4NjRsLTE0LjU0MDggMjguNDE2eiIgZmlsbD0iIzZFNkU5NiIgb3BhY2l0eT0iLjE1IiAvPjxwYXRoIGQ9Ik01NzAuNjMyNTc2IDI1My4wMzA0aDIxLjc2djYxLjcyMTZoLTIxLjc2di02MS42OTZ6IiBmaWxsPSIjNkU2RTk2IiBvcGFjaXR5PSIuMTUiIC8+PHBhdGggZD0iTTQ3NS43NTg5NzYgMzE2LjEwODhINDM5LjgxNjU3NmwyLjU2LTE5LjJoMzMuMzU2OHYxOS4yek01OTMuMjYyOTc2IDI5Ni44ODMyaDMzLjMzMTJ2MTkuMjI1NmgtMzMuMzMxMnYtMTkuMnoiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9Ii42IiAvPjxwYXRoIGQ9Ik01MDIuNjM4OTc2IDIwMS4yMTZtMi43NjI5NDUtMTAuMzExNDUxbC0wLjAwNjYyNiAwLjAyNDcyN3EyLjc2Mjk0NS0xMC4zMTE0NTEgMTMuMDc0Mzk3LTcuNTQ4NTA2bDYxLjc5NDUyNSAxNi41NTc3OTNxMTAuMzExNDUxIDIuNzYyOTQ1IDcuNTQ4NTA2IDEzLjA3NDM5N2wwLjAwNjYyNi0wLjAyNDcyOHEtMi43NjI5NDUgMTAuMzExNDUxLTEzLjA3NDM5NiA3LjU0ODUwNmwtNjEuNzk0NTI2LTE2LjU1Nzc5M3EtMTAuMzExNDUxLTIuNzYyOTQ1LTcuNTQ4NTA2LTEzLjA3NDM5NloiIGZpbGw9IiMxNTU4QTYiIC8+PHBhdGggZD0iTTYwNC45MTc0NTEgMTQyLjE2MzY0M20tMTAuMzExNDUyLTIuNzYyOTQ1bDAuMDI0NzI4IDAuMDA2NjI2cS0xMC4zMTE0NTEtMi43NjI5NDUtMTMuMDc0Mzk2IDcuNTQ4NTA2bC0xNi41NTc3OTQgNjEuNzk0NTI1cS0yLjc2Mjk0NSAxMC4zMTE0NTEgNy41NDg1MDcgMTMuMDc0Mzk2bC0wLjAyNDcyOC0wLjAwNjYyNXExMC4zMTE0NTEgMi43NjI5NDUgMTMuMDc0Mzk3LTcuNTQ4NTA3bDE2LjU1Nzc5My02MS43OTQ1MjVxMi43NjI5NDUtMTAuMzExNDUxLTcuNTQ4NTA3LTEzLjA3NDM5NloiIGZpbGw9IiMxNTU4QTYiIC8+PHBhdGggZD0iTTUyNS4yOTQ5NzYgMTQwLjhtOS4yNDQ5OTQtNS4zMzc2bC0wLjAyMjE3IDAuMDEyOHE5LjI0NDk5NC01LjMzNzYgMTQuNTgyNTk1IDMuOTA3Mzk0bDQ1Ljg2MjQgNzkuNDM2MDA3cTUuMzM3NiA5LjI0NDk5NC0zLjkwNzM5NSAxNC41ODI1OTVsMC4wMjIxNy0wLjAxMjhxLTkuMjQ0OTk0IDUuMzM3Ni0xNC41ODI1OTQtMy45MDczOTVsLTQ1Ljg2MjQtNzkuNDM2MDA3cS01LjMzNzYtOS4yNDQ5OTQgMy45MDczOTQtMTQuNTgyNTk0WiIgZmlsbD0iIzE1NThBNiIgLz48L3N2Zz4=';

      var line = new maptalks.LineString(coordiantes, {
        symbol: {
          lineWidth: 5,
          lineColor: 'yellow'
        }
      });
      line.addTo(layer);
      map.setCenter(line.getCoordinates()[0]);
      var point = new maptalks.Marker(coordiantes[0], {
        symbol: {
          markerFile: markerFile,
          markerWidth: 50,
          markerHeight: 50
        }
      }).addTo(layer);

      var currentCoordinate, preCoordinate;

      // eslint-disable-next-line no-unused-vars
      function start() {
        line.animateShow(
          {
            duration: 100000,
            easing: 'linear'
          },
          function(frame, c) {
            currentCoordinate = c.copy();
            point.setCoordinates(currentCoordinate);
            if (preCoordinate) {
              if (!map.isInteracting()) {
                var bearing = getBearing(preCoordinate, currentCoordinate);
                map.setCenter(currentCoordinate);
                map.setBearing(bearing);
              }
            }
            preCoordinate = c.copy();
          }
        );
      }

      function getBearing(c1, c2) {
        // eslint-disable-next-line no-undef
        var p1 = turf.point(c1.toArray()),
          // eslint-disable-next-line no-undef
          p2 = turf.point(c2.toArray());
        // eslint-disable-next-line no-undef
        var bearing = turf.bearing(p1, p2);
        if (Math.abs(map.getBearing() - bearing) < 30) {
          return map.getBearing();
        }
        return bearing;
      }

    </script>
  </body>
</html>
已复制！