如何在折线上应用css:传单

Question

我正在使用使用传单api的应用程序.

介绍

我需要绘制不同类型的栅栏,使用装饰器我可以在一定程度上对折线应用良好的视觉效果,但不是很多.

问题

我愿意显示扭曲的线而不是破折号,点或平线,我知道绞线将是一个图像,但无法找到有关将自定义css应用于折线的帮助.

脚本示例

         var fence2Icon = L.icon({
                            iconUrl: 'xxxx.png',
                            iconSize: [5, 20]
                            iconAnchor: [5, 18]
                        });

                        // Add coordinate to the polyline
                        var polylineFence2 = new L.Polyline([], { color: 'red' });
                    function fencePlace2(e) {
                        // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
                        // Add coordinate to the polyline
               polylineFence2.addLatLng(e.latlng).addTo(curr);
            var decorator = L.polylineDecorator(polylineFence2, {
            patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
                         }]
                    }).addTo(curr);
                    }    

                L.easyButton('fa-flash', function () {
                            $('.leaflet-container').css('cursor', 'crosshair');
                            map.on('click', fencePlace2);
                            polylineFence2 = new L.Polyline([], { color: 'red' });
                        }).addTo(map);

如果有人对折线或其他方式有所了解,请提供帮助.谢谢你的时间:-)

Answer 1

您可以在折线的选项中添加一个类......

var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);

并在CSS中添加您自己的设置...

.my_polyline { 
  stroke: green;
  fill: none;
  stroke-dasharray: 10,10; 
  stroke-width: 5;  
}

这是一个例子:http://jsfiddle.net/FranceImage/9dggfhnc/

您也可以直接访问某些选项...

var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);

请参见路径选项