在 Leaflet 中使用 MultiLineString 的问题答案

【问题标题】：Issue with using MultiLineString in Leaflet在 Leaflet 中使用 MultiLineString 的问题
【发布时间】：2020-08-22 11:24:43
【问题描述】：

我的来自服务器的响应（重组如下代码）是 this

为了将此响应中的对象用于marker Animation in Leaflet，我需要按照 GeoJSON 的定义重新构建响应，并且我必须翻转坐标，因为 Leaflet 使用 lat、lng 和我的 lng、lat 来自 Geoserver。

This is a good reference for GeoJSON standard 我需要的数据类型示例是 MultiLineString，第 24 页。

更新：

我得到了 MultiLineString 的正确 JSON 结构，[[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...]你可以在第一张图片上看到。

如果我使用重组变量 (flippedCoords) 创建折线并在其上设置动画标记，它不会在控制台中给我任何错误，但它确实会给我带来错误，因为一旦加载响应并且我放大，其他层的行为就会变得奇怪/out..

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

};

【问题讨论】：

标签： javascript arrays leaflet geojson multilinestring

【解决方案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);...

【讨论】：