Проблема с использованием MultiLineString в Leaflet - PullRequest
Новая
       97

Проблема с использованием MultiLineString в Leaflet

0 голосов
/ 07 мая 2020

Мой ответ (реструктурированный, как в коде ниже) от сервера: это

Чтобы использовать объекты из этого ответа для анимации маркеров в листовке мне нужно реструктурировать ответ, как определяет Geo JSON, и мне пришлось перевернуть координаты, поскольку Leaflet использует lat, lng, а мои были lng, lat, поступающие с Geoserver.

Это хорошая ссылка для Geo JSON стандартный и пример для нужного мне типа данных - MultiLineString, на стр. 24.

ОБНОВЛЕНО:

Я получаю правильную структуру JSON для MultiLineString, [[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...] как вы видите на первом изображении.

Если я использую реструктурированную переменную (flippedCoords) для создания полилинии и анимации маркера над ней, это не дает мне никаких ошибок в консоли, но дает мне ошибки, поскольку другие слои ведут себя странно, как только ответ загружается и Я увеличиваю / уменьшаю масштаб ..

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

};

1 Ответ

0 голосов
/ 07 мая 2020

вы можете создать глобальный объект 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);...
...