Как использовать плагин PolylineDecorator LeafletJS с функцией GeoJSON featureCollection?

Question

Я пытаюсь использовать плагин с плагинами polylinedecorator, но не могу заставить его работать с моей функцией GeoJSON и отображать на моей карте.

Это мой JSFIDDLE. Примечание: я наклеил код плагина polylinedecorator в разделе Javascript. Прокрутите до конца скрипта, чтобы увидеть мой фактический код.

Вот мой реальный код:

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

Вы должны помнить, что L.polylineDecorator(...) возвращает экземпляр декоратор слоев , что вы должны добавить к карте, то есть:

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

Просто экземпляр декоратора полилинии делает не добавьте его на карту. Можно, конечно, хранить декораторов в переменной и добавить их позже, или использовать L.Control.Layers для переключения их включения и выключения и т.д.

Смотреть это работает на https://playground-leaflet.rhcloud.com/dey/1/edit?html,output

Этот пример добавляет декораторы непосредственно карта. Если вы хотите добавить их к экземпляру L.GeoJSON, используйте addTo(this). Или добавьте их к другому L.LayerGroup и добавьте группу на карту и т. Д. И т. Д. И т. Д.