javascript - 如何将 LeafletJS polylineDecorator 插件与 GeoJSON featureCollection 一起使用？

Question

我正在尝试使用 polylinedecorator 传单插件，但似乎无法让它与我的 GeoJSON featureCollection 一起使用并显示在我的 map 上。

这是我的 JSFIDDLE 。 注意:我在 Javascript 部分粘贴了 polylinedecorator 插件代码。滚动到 fiddle 的底部以查看我的实际代码。

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

您必须记住，L.polylineDecorator(...) 返回装饰层的一个实例您必须将其添加到 map ，即:

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

简单地实例化折线装饰器不会将它添加到 map 中。当然，您可以将装饰器存储在一个变量中并在以后添加它们，或者使用 L.Control.Layers 来打开和关闭它们，等等。

在 https://playground-leaflet.rhcloud.com/dey/1/edit?html,output 查看它的工作情况

该示例将装饰器直接添加到 map 。如果您想将它们添加到 L.GeoJSON 实例，请使用 addTo(this)。或者将它们添加到不同的 L.LayerGroup 并将组添加到 map 等。