如何将 LeafletJS 折线装饰器插件与 GeoJSON 功能集合一起使用

Question

我正在尝试使用折线装饰器传单插件，但似乎无法让它与我的 GeoJSON 功能集合一起使用并显示在我的地图上。

这是我的 JSFIDDLE .注意：我将折线装饰器插件代码粘贴在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并将组添加到地图中，等等。