單張多色折線

Question

Leaflet中是否有選項可以制作具有不同路徑顏色的一條折線？

在谷歌中，您可以使用具有顏色屬性的路徑對象，但是我在 Leaflet 中沒有找到類似的選項。

Answer 1

有一些庫，如https://github.com/Oliv/leaflet-polycolor但您不需要為此提供庫。

您有“主”折線，並由此生成新的線段。

   var poly = L.polyline([
       [51.509, -0.08],
       [51.503, -0.06],
       [51.51, -0.047],
       [51.51, -0.06],
   ]);
//.addTo(map); Don't add the main line to the map

 setPolylineColors(poly,['#f00','#ff0','#000'])


 function setPolylineColors(line,colors){

   var latlngs = line.getLatLngs();

   latlngs.forEach(function(latlng, idx){
           if(idx+1 < latlngs.length ){
           var poly =  L.polyline([latlng,latlngs[idx+1]],{color: colors[idx]}).addTo(map);
        }
   })
 }

示例： https : //jsfiddle.net/falkedesign/2b8t3v6f/