Open Layers 3 - 如何防止LineString再次绘制起始坐标？

Question

我正在尝试通过单击地图上的多个点要素来绘制 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。如果您需要查看代码，这里有一个 fiddle

2015 年 11 月 20 日更新： 我尝试在每次单击一个点绘制线条时创建新层，而不是为同一层设置新源。所以不用

routeLayer.setSource(newSource)

我用

map.addLayer(initRouteLayer(newSource))

还是不行，还是一样

更新 11/12/2015 : 我刚刚又回到了这个问题，我发现当我第二次点击一个点时出现了问题，每次。所以我发布的第一张图片实际上是来自雅加达的两条单独的线路，彼此重叠，所以它显示为一条线路。

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
};

所以它搞砸了我的其余代码。我想我必须更加小心。

无论如何，如果有人遇到同样的问题，我希望这对您有所帮助。还有这里的 fixed fiddle

Open Layers 3 - 如何防止LineString再次绘制起始坐标？

Open Layers 3 - How to prevent LineString from drawing from starting coordinate again?

javascript

openlayers

geospatial