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))

它仍然不起作用，仍然做同样的事情

更新2015年12月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
};

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

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

打开图层3 - 如何防止LineString再次从起始坐标绘制？

1 个答案: