打开第3层-如何防止LineString重新开始绘制坐标？

Question

我试图通过单击地图上的多个点Feature来绘制LineString几何形状。 想法是创建从起点到下一个点的连续线，依此类推。

首先，我通过加载geoJSON文件来加载可能的坐标，以单击该行以进行绘制：

//define a geoJSON file as a source of features
geoJsonVectorSource = new ol.source.Vector({
    url: 'geojson-file',
    format: new ol.format.GeoJSON({
        defaultDataProjection: 'EPSG:4326',
        projection: 'EPSG:3857'
    })
});

然后将源加载到具有样式，标准内容的图层中。

现在，由于这条线的工作方式类似于某种路线，因此它具有出发点和目的地，因此脚本必须从geojson源中读取这两个点，然后才能开始单击。

fixesLayer.getSource().on('change', function (evt) {
    var fixesSource = evt.target;
    if (fixesSource.getState() === 'ready') {
        map.on('singleclick', function (evt) {
            var feature = map.forEachFeatureAtPixel(evt.pixel,

            function (feature, layer) {
                return feature;
            });
            if (feature) {
                // alert('from inside');
                tempCoordinates = getRoutesCoordinates(coordinates, fixesSource, feature.getGeometry().getCoordinates());
                for (var i = tempCoordinates.length - 1; i >= 0; i--) {
                    coordinates.push(tempCoordinates[i]);
                };
                console.log('coordinates is ' + coordinates);
                console.log('coordinate length is ' + coordinates.length);
                lineSource = getLineSource(coordinates);
                routeLayer.setSource(lineSource);
            }
        });
    }
});

fixesSource本质上是geoJsonVectorSource。 getRouteCoordinates函数用于填充用于创建新LineString的坐标数组。 getLineSource函数用于创建具有更新行的新源。 当源准备就绪时，我用新的源更新routeLayer（其中包含LineString功能）。 这样，每次我单击地图中的指定点时，都会在它们之间绘制一条线，就像这样：

[编辑：上图实际上是与雅加达分开的两条直线。]

我将出发点指定为雅加达的出发点，因此当我单击该出发点以外的其他点时，地图将在雅加达点与被点击的点之间划一条线。

但是由于某种原因，对于几组坐标，LineString会再次从Jakarta重新启动图形，而不是从我单击的最后一点重新开始。 有点像这样：

有什么办法可以防止这种情况？ 我目前正在使用Open Layer 3.11.1。 如果您需要查看代码，这是一个小提琴

---

2015年11月20日更新：每次单击一个点以画线时，我都尝试过创建新图层，而不是为同一图层设置新的源。 所以不要使用

routeLayer.setSource(newSource)

我用

map.addLayer(initRouteLayer(newSource))

它仍然不起作用，并且仍然执行相同的操作

2015年11月12日更新：我又回到了这个问题，我发现问题是在我第二次单击某个点时发生的。 因此，我张贴的第一张照片实际上与雅加达有两条不同的线，彼此重叠，因此看起来像一条线。

Answer 1

事实证明，我的代码中存在一个反向的for循环，以错误的方式列出了坐标，这就是为什么该行返回雅加达的原因。 问题是因为我使用Sublime Text 2并建议javascript for循环的代码完成：

for(var i = Things.length; i <= 0; i--){
    //block of code
};

而不是以前的那种。 像这样：

for(var i = 0; i < Things.length; i++){
    //block of code
};

因此，它弄乱了我其余的代码。 我想我必须更加小心。

无论如何，如果有人遇到相同的问题，希望对您有所帮助。 这也是固定的小提琴