如何在折线上应用 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);

见Path Options

Answer 2

如果您创建折线，您实际上是在向 SVG 元素添加一个元素，Leaflet 使用该元素来绘制它的叠加层。样式化 SVG 路径元素不同于样式化常规 HTML 元素。没有 border 和 background-color 之类的东西。它有不同的属性，如果你有兴趣，这里是一个很好的阅读：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

当您通过选项或通过 CSS 使用此处文档中描述的属性（与样式相关）来实例化 Leaflet 的路径元素时，您可以设置它们的样式：

http://leafletjs.com/reference.html#path

通过选项：

new L.Polyline([...], {
    weight: 3,
    color: 'red',
    opacity: 0.5
}).addTo(map);

通过 CSS：

new L.Polyline([...], {
    className: 'polyline'
}).addTo(map);

.polyline {
    weight: 3,
    color: red,
    opacity: 0.5
}

但是，您想要的，使用图像根本是不可能的。您可以使用图像作为 SVG 路径的填充，但对于您的用例来说这是不可能的。您需要向正在使用的 SVG 传单添加模式定义，然后您可以使用该 id 作为此答案中概述的填充属性： https://stackoverflow.com/a/3798797/2019281 但总是水平填充/平铺图像，如果你的折线是垂直的，这将不起作用。