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

您可以在折线选项中添加 class ...

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

如果您创建多段线，您实际上是在向 Leaflet 用来绘制其叠加层的 SVG 元素添加一个元素。样式化 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 Leaflet 添加模式定义，然后您可以使用该 id 作为填充属性，如本答案中所述：但总是 fill/tile 图像水平，如果你的折线是垂直的，这将不起作用。

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

How to apply css on polylines : leaflet

leaflet

angular-leaflet-directive