Leaflet swap the coordinates when use geoJson

问题:

I have little leaflet application where the app get geoJson objects from server, and display it, specially LineString. The json parser that i use on server side works properly. And the client side script was ok too.

But some reasons i would like to draw arrow on the routes, and i can't figure out how to do it when using L.geoJson().

Code with L.geoJson():

   getJsonFrom(routeQueryURL, params, function(data) {
     var a = L.geoJson(data, {
       onEachFeature: bindRouteDirection,
     }).addTo(map);
   });

Because i don't want to change anything on server side, i tried this:

getJsonFrom(routeQueryURL, param, function(data) {
    $.each(data, function(index, feature) {
      var polyline = new L.Polyline(feature.geometry.coordinates, {
        color: feature.properties.color,
        opacity: 0.8
      }).addTo(routeMapLayer);

      var decorator = L.polylineDecorator(polyline, {
        patterns: [{
          offset: 25,
          repeat: 50,
          symbol: L.Symbol.arrowHead({
            pixelSize: 15,
            pathOptions: {
              stroke: true,
              color: feature.properties.color,
              fillOpacity: 0.8,
              polygon: false,
              weight: 3
            }
          })
        }]
      }).addTo(routeMapLayer);

      map.addLayer(routeMapLayer);
    });
  });

So i access the array of coordinates from the geoJson object, and some other data, and draw the polyline directly on to map.The problem is that it's put my route into the middle of middle east instead of Hungary, so it's actually swap the coordinates. Why does L.Polyline handle the different form L.geoJson() ?

回答1:

Use L.GeoJSON.coordsToLatLng() and read why sometimes coordinates are lat-lng and sometimes lng-lat.