如何使用带有 GeoJSON featureCollection 的 LeafletJS polylineDecorator 插件？

Question

I am trying to use the polylinedecorator leaflet plugin but can't seem to get it to work with my GeoJSON featureCollection and display on my map.

Here's my JSFIDDLE . Note: I pasted the polylinedecorator plugin code in the Javascript section. Scroll to the bottom of the fiddle to see my actual code.

Here's my actual code:

var data = {

  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            13.974609375,
            31.728167146023935
          ],
          [
            12.83203125,
            34.74161249883172
          ],
          [
            14.501953124999998,
            35.31736632923788
          ],
          [
            16.5234375,
            37.16031654673677
          ],
          [
            17.841796875,
            38.41055825094609
          ],
          [
            16.611328125,
            40.245991504199026
          ],
          [
            19.072265625,
            43.389081939117496
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            19.51171875,
            30.90222470517144
          ],
          [
            19.072265625,
            33.65120829920497
          ],
          [
            20.830078125,
            35.24561909420681
          ],
          [
            21.26953125,
            38.47939467327645
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            24.521484375,
            32.10118973232094
          ],
          [
            26.54296875,
            35.96022296929667
          ],
          [
            25.13671875,
            36.80928470205937
          ],
          [
            23.466796875,
            38.13455657705411
          ],
          [
            24.960937499999996,
            41.31082388091818
          ]
        ]
      }
    }
  ]
};

var polylines = L.geoJson(polylines, {
      onEachFeature: function (feature, layer) {
        L.polylineDecorator(layer, {
            patterns: [
                {offset: 25, repeat: 30, symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
            ]
        })
    }
}).addTo(map);

Answer 1

You must remember that L.polylineDecorator(...) returns an instance of the decorator layers that you must add to the map , ie:

var polylines = L.geoJson(json, {
  onEachFeature: function (feature, layer) {
    L.polylineDecorator(layer, {
      patterns: [
        {offset: 25, repeat: 30, symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
      ]
    }).addTo(map);  /// Adds each decorator to the map!!!!
  } 
}).addTo(map);

Simply instantiating the polyline decorator does not add it to the map. You can, of course, store the decorators in a variable and add them later, or use a L.Control.Layers to toggle them on and off, etc.

See it working at https://playground-leaflet.rhcloud.com/dey/1/edit?html,output

That example adds the decorators directly to the map. If you want to add them to the L.GeoJSON instance instead, use addTo(this) . Or add them to a different L.LayerGroup and add the group to the map, etc etc etc.