leaflet - 如何在折线上应用 css : leaflet

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);

见 Path Options