Question

我正在尝试使用polylinedecorator leaflet插件，但似乎无法使用我的GeoJSON featureCollection并在我的地图上显示。

这是我的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并将该组添加到地图等等。

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

1 个答案: