在Leaflet中使用MultiLineString的问题

Question

我从服务器得到的响应(按以下代码重组)是这个

为了将此响应中的对象用于 传单中的标记动画 我需要按照GeoJSON的定义来重构响应，而且我必须翻转坐标，因为Leaflet使用lat，lng，而我的坐标是来自Geoserver的lng，lat。

这是GeoJSON标准的一个很好的参考。 和我需要的数据类型的例子是MultiLineString，在第24页。

更新了。

我得到了MultiLineString的正确JSON结构。[[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...]如你在第一张图上看到的那样。

如果我使用重组变量(flippedCoords)来创建一条多段线，并在其上制作动画标记，它不会在控制台中给我任何错误，但它确实给我带来了bug，因为其他层的行为很奇怪，只要响应被加载，我就会放大。

Ajax调用并尝试结构化响应。

function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=1.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json
&srsName=EPSG:4326`;
var routeLayer = L.geoJSON(null);
var flippedCoords;
$.ajax({
    url: urlRoute,
    async: false,
    success: function(response){
                var routeArr = response.features;
                var coordsArr = Object.keys(routeArr).map(key => {
                    return routeArr[key]
                })
                    var xxy = coordsArr.map(function(feature){
                    var obj = feature.geometry.coordinates[0];
                    return Object.keys(obj).map(function(key){
                        return obj[key];                        
                    })
                })


                var flipCoor = L.GeoJSON.coordsToLatLngs(xxy, 1);
                flippedCoords = flipCoor.map(function(obj){
                    return Object.values(obj).map(function(obj){
                        return Object.values(obj)
                        })
                    })
//code below is from Animate marker plugin and works fine with linestring           
                var multiLineString =  L.polyline(flippedCoords); 
                var secondAnimated = L.animatedMarker(multiLineString.getLatLngs(), {
                                        distance: 10,
                                        interval: 2000,
                                        iconSize:[16,16],
                                        iconAnchor: [7, 16],
                                        //autostart: false,
                                        icon: pulsingIcon

                                    });

                routeLayer = L.geoJSON(response);   
                map.addLayer(secondAnimated);
    }   

});     

    map.addLayer(routeLayer);       

};

Answer 1

你可以创建empty_arr全局对象，一切都会好起来的，我想看起来像这样。

          var empty_arr = new Array();
          success: function(response){
            var routeArr = response.features;
            routeArr.forEach(linePart => { 
                var coords = linePart.geometry.coordinates;
                coords.forEach(function(coord){
                    var newArray = coord;
                    var finalArr = newArray.map(function(obj){
                        return Object.values(obj).sort().map((value)=>{
                            return value

                        })
                    })
                    var flipCoor = L.GeoJSON.coordsToLatLngs(finalArr, 0);
                    var flippedCoor = flipCoor.map(function(obj){
                        return Object.keys(obj).sort().map(function(key){
                            return obj[key];
                            })
                    })

                     empty_arr.push(flippedCoor);...