leaflet对线设置渐变色

效果展示：

 引用leaflet-polycolor组件

npm install leaflet-polycolor

.vue文件中使用 

import leafletPolycolor from 'leaflet-polycolor';

leafletPolycolor(L);

const latLngs = [[37.03, 111.92], [37.53444, 111.98555], [36.88, 112.12], [37.53444, 112.24], [36.88, 112.54], [37.45, 112.74]];

  const colors = ['rgb(20, 200, 100)', 'rgb(200, 100, 20)', null, null, 'rgb(20, 200, 100)', 'rgb(0, 0, 0)'];

  L.polycolor(latLngs, {

    color: "#ff0000",

    colors: colors,

    weight: 5

  }).addTo(map);

完整代码：

注意：如果线两端点没有渲染，则线显示颜色为配置color颜色，不为渐变色。