笔触,填充的单独颜色

时间:2020-05-21 15:12:36

标签: reactjs leaflet react-leaflet polyline-decorator

我在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"
        }
      })
    }
  ]

1 个答案:

答案 0 :(得分: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);

结果

enter image description here

相关问题