笔触、填充的单独颜色

Question

我已经沿着 GeoJson 的路径添加了箭头。我想知道是否有办法自定义描边颜色以不同于填充颜色？

以下是我尝试过的选项：

    {
      offset: "20%",
      repeat: "30%",
      symbol: L.Symbol.arrowHead({
        pixelSize: zoom * 2,
        pathOptions: {
          fillOpacity: 1,
          weight: 0,
          // fill: true,
          // fillColor: "#c71002",
          color: "#c71002",
          stroke: true,
          strokeColor: "#fff"
        }
      })
    }
  ]

Answer 1

实际上不支持strokeColor。

要实现类似边框的效果，可以指定以下属性（来自 documentation）

stroke 设置为 true（默认）- 确定是否沿路径绘制描边。
weight - 以像素为单位的描边宽度
color - 描边颜色

幕后 arrowHead 符号呈现为多边形或折线。

例子

L.polylineDecorator(layer, {
  patterns: [
    {
      offset: "10%",
      repeat: "20%",
      symbol: L.Symbol.arrowHead({
        pixelSize: 25,
        pathOptions: {
          color: "#c71002",
          fillColor: '#fff',
          fillOpacity: 1,
          stroke: true,
          weight: 2,
        },
      }),
    },
  ],
}).addTo(map);

结果

笔触、填充的单独颜色

Separate colors for stroke, fill

leaflet

reactjs

react-leaflet

polyline-decorator