Canvas Openlayers 3：每次将线段添加到线字符串时重新绘制地图图层

跟进

我正在使用setInterval循环逐段为线字符串绘制动画。每次循环函数并添加段时，我都会重新命名层。这是最有效的方法吗？虽然我得到了一个

AssertionError: Assertion failed: listeners already registered

第一个循环后每个循环的错误

相关代码如下：

    function makeLineString(multipointCoords) {

        var trackStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(255,0,255,0.2)',
                width: 0.5
            })
        });

        var trackFeature = new ol.Feature({
            geometry: new ol.geom.LineString([
                ol.proj.transform(multipointCoords[0][0], 'EPSG:4326', 'EPSG:3857')
            ])
        });

        var trackLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [trackFeature],
            }),
            style: trackStyle
        });

        var coordinate, i = 1,
            length = multipointCoords[0].length;
        var timeInterval = 250;
        console.log(i);

        var timer;
        timer = setInterval(function() {
            segmentConstruction(multipointCoords);
        }, timeInterval);

        function segmentConstruction(multipointCoords) {

            coordinate = ol.proj.transform(multipointCoords[0][i], 'EPSG:4326', 'EPSG:3857');

            trackFeature.getGeometry().appendCoordinate(coordinate);

            if (i === length-1) {
                clearInterval(timer);
            } else {
                i++;
                map.addLayer(trackLayer);
            };
        };
    };

---

不，不要这样做。您可能需要以下内容：

var lineString = new ol.geom.LineString([
    ol.proj.fromLonLat(multipointCoords[0][0])
]);
var trackFeature = new ol.Feature({
    geometry: lineString
});

然后是append函数：

function segmentConstruction(multipointCoords) {

    coordinate = ol.proj.fromLonLat(multipointCoords[0][i]);
    lineString.appendCoordinate(coordinate);

    if (i === length-1) {
        clearInterval(timer);
    } else {
        i++;
        //map.addLayer(trackLayer); <----- remove this
    };
};

功能段构造（多点协调）{
坐标=LONLAT（多点坐标[0][i]）的ol.proj；
lineString.appendCoordinate（坐标）；
如果（i==长度-1）{
清除间隔（计时器）；
}否则{
i++；
//map.addLayer（trackLayer）；不，不要这样做。您可能需要以下内容：

var lineString = new ol.geom.LineString([
    ol.proj.fromLonLat(multipointCoords[0][0])
]);
var trackFeature = new ol.Feature({
    geometry: lineString
});

然后是append函数：

function segmentConstruction(multipointCoords) {

    coordinate = ol.proj.fromLonLat(multipointCoords[0][i]);
    lineString.appendCoordinate(coordinate);

    if (i === length-1) {
        clearInterval(timer);
    } else {
        i++;
        //map.addLayer(trackLayer); <----- remove this
    };
};

功能段构造（多点协调）{
坐标=LONLAT（多点坐标[0][i]）的ol.proj；
lineString.appendCoordinate（坐标）；
如果（i==长度-1）{
清除间隔（计时器）；
}否则{
i++；
//map.addLayer（trackLayer）；我根据您的建议修改了代码，但未渲染线条字符串。线条字符串或线条字符串段在代码中的何处渲染？@interwebjill查看fiddle演示。您的线条字符串已在地图上。库中附加的每个坐标都将为您渲染。我根据您的建议修改了代码，但线条字符串未渲染。linestring或linestring段在代码中的何处渲染？@interwebjill将查看fiddle演示。您的linestring已在地图上。库中附加到它的每个坐标都将为您渲染。