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 Leaflet添加模式定义，然后您可以使用该id作为填充属性，如本答案中所述： https://stackoverflow.com/a/3798797/2019281但会始终水平填充/平铺图像，如果折线是垂直的，则无效。

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

2 个答案: