0

我正在尝试使用动画创建 ReactLeafletArc 插件这是代码

if (!L) {
    throw "Leaflet.js not included";
} else if (!arc || !arc.GreatCircle) {
    throw "arc.js not included";
} else {
    L.Polyline.Arc = function (from, to, options) {
        from = L.latLng(from);
        to = L.latLng(to);

        var vertices = 10;
        var arcOptions = {};
        if (options) {
            if (options.offset) {
                arcOptions.offset = options.offset;
                delete options.offset;
            }
            if (options.vertices) {
                vertices = options.vertices;
                delete options.vertices;
            }
        }

        var generator = new arc.GreatCircle({ x: from.lng, y: from.lat }, { x: to.lng, y: to.lat });

        var line = generator.Arc(vertices, arcOptions);
        var latLngs = [];

        var newLine = L.polyline(line.geometries[0].coords.map(function (c) {
            return c.reverse();
        }), options);

        var totalLength = newLine._path.getTotalLength() * 4;
        newLine._path.classList.add('path-start');
        newLine._path.style.strokeDashoffset = totalLength;
        newLine._path.style.strokeDasharray = totalLength;
        setTimeout((function (path) {
            return function () {
                path.style.strokeDashoffset = 0;
            };
        })(newLine._path), 200);

        return newLine;
    };
}

我收到错误

未捕获的类型错误：无法读取未定义的属性“getTotalLength”

使用 console.log(newLine) 我可以看到没有_path。

NewClass
_bounds:L.LatLngBounds
_initHooksCalled:true
_latlngs:Array[100]
options:Object
__proto__:NewClass

但如果我评论这部分

var totalLength = newLine._path.getTotalLength() * 4;
    newLine._path.classList.add('path-start');
    newLine._path.style.strokeDashoffset = totalLength;
    newLine._path.style.strokeDasharray = totalLength;
    setTimeout((function (path) {
        return function () {
            path.style.strokeDashoffset = 0;
        };
    })(newLine._path), 200);

该行是在没有动画的情况下创建的，并且使用 console.log(newLine) 我明白了

NewClass
_bounds:L.LatLngBounds
_initHooksCalled:true
_latlngs:Array[100]
_leaflet_id:122
_map:NewClass
_mapToAdd:NewClass
_parts:Array[1]
_path:path
_pxBounds:L.Bounds
_renderer:NewClass
_rings:Array[1]
_zoomAnimated:true
options:Object
__proto__:NewClass

有什么建议吗？

4

0 回答 0