leaflet marker 动态移动_leaflet marker移动-CSDN博客

本文链接：https://blog.csdn.net/qq_34870529/article/details/129128196

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.3/leaflet-src.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.3/leaflet.css" rel="stylesheet">
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = window.map = L.map('map', {
            crs: L.CRS.EPSG4326
        }).setView([39.96, 116.39], 13);
        const url = 'https://t0.tianditu.gov.cn/';

        L.tileLayer(
            url +
            "vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=0b018552994f71a9467d24461a8f8238", {
                maxZoom: 20,
                tileSize: 256,
                zoomOffset: 1,
            }
        ).addTo(map);

        var myIcon = L.icon({
            iconUrl: 'https://www-test04.eqfleetcmder.com/static/img/dkz.a6be4265.png',
            iconSize: [38, 95],
            iconAnchor: [22, 94],
            popupAnchor: [-3, -76],
            shadowSize: [68, 95],
            shadowAnchor: [22, 94]
        });

        const myPositionMarker = L.marker([39.96, 116.39], {
            icon: myIcon
        }).addTo(map);
        
        var pos = map.latLngToLayerPoint(myPositionMarker.getLatLng());
        var fx = new L.PosAnimation();
        fx.run(myPositionMarker._icon, pos, 0.3);
        let x = 116.39;
        let y = 39.96;
        
        // setInterval(() => {
        //     x += 0.002;
        //     y += 0.002;
        //     let pos = map.latLngToLayerPoint({lng: x, lat: y});
        //     fx.run(myPositionMarker._icon, pos, 1, (0, 0, 1, 1));
        // }, 1000);
        
        fx.on('end', () => {
            console.log('1111111111');
            myPositionMarker.setLatLng(L.latLng(y, x));
            x += 0.002;
            y += 0.002;
            let pos = map.latLngToLayerPoint({lng: x, lat: y});
            fx.run(myPositionMarker._icon, pos, 1, (0, 0, 1, 1));
        });
    </script>
</body>

</html>