ES5基于leaflet插件与高德地图完成蚂蚁路径

1、引入leaflet插件和高德地图

leaflet插件官网
https://leafletjs.com/reference.html
若是ES6 install leaflet
npm install leaflet-ant-path --save
若是ES5则下面引入

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-ant-path" type="text/javascript"></script>
<script type="text/javascript"src="https://webapi.amap.com/mapsv=1.4.10&key=1046fc7c21fbb14c0e630367f6c5c26f&plugin=AMap.DistrictSearch&plugin=AMap.GraspRoad"></script>
<script src="https://www.makeapie.com/dep/echarts/map/js/china.js"></script>

2、初始化地图

  const map = L.map("map", {
    minZoom: 3,
    maxZoom: 14,
    zoom: 12,
    zoomControl: false,
    attributionControl: false,
  }).setView(longLat, 5);

  // 初始化地图图层
  L.tileLayer(
      "https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f11b79a9c885650002c93f600013e969"
  ).addTo(map);
  L.tileLayer(
      "https://t0.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=f11b79a9c885650002c93f600013e969"
  ).addTo(map);
  myMap = map

3、蚂蚁路径已经maker点位

let myMap = "" // 地图
let markerMap = [] // marker点位  用来重置marker点位
let pathMap = [] // 蚂蚁路径 用来重置蚂蚁路径

    // 渲染之前先清空
    if (markerMap != undefined && markerMap.length > 0) {
       markerMap.forEach((p) => {
        myMap.removeLayer(p);
      });
    }

    if (pathMap != undefined && pathMap.length > 0) {
      pathMap.forEach((p) => {
        myMap.removeLayer(p);
      });
    }
// 返回数据  循环加载maker
// maker点位图标
(https://img-blog.csdnimg.cn/ed39f4ce289749f2b5819a7295769a37.png#pic_center)

  const imgDatUrl = `${myAjax.ctxPath}/img/map-marker11.png`;
  // 图标
  const viewIcon = L.icon({
    iconUrl: imgDatUrl,
    iconSize: [10, 10],
  });
  // 信息框 信息
  const popText = `<div>测试数据</div>`
  // maker点位经纬度
  const makerData = [36.6420,79.8240]
  const marker = new L.marker(makerData, { icon: viewIcon })
      .addTo(myMap)
      .bindPopup(popText);
  markerMap.push(marker)

  // 蚂蚁路径
  const arr =[
    [36.6420,79.8240],
    [31.2260,87.4600],
    [30.2680,89.8370],
    [29.9790,90.8700],
  ]


  // 加载蚂蚁线
  const path = L.polyline.antPath(arr, {
    "delay": 400,
    "dashArray": [
      10,
      20
    ],
    "weight": 5,
    "color": "#0000FF",
    "pulseColor": "#FFFFFF",
    "paused": false,
    "reverse": false,
    "hardwareAccelerated": true
  });
 pathMap.push(path);

  myMap.addLayer(path);
  myMap.fitBounds(path.getBounds())