7

我正在使用使用传单 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);

如果有人对折线或其他方式有所了解，请提供帮助。谢谢你的时间：-）

4

2 回答 2

18

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

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

请参阅路径选项

于 2015-10-01T11:10:42.807 回答
4

如果您创建一条折线，您实际上是在向 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但将始终填充/如果您的折线是垂直的，则水平平铺图像将不起作用。

于 2015-10-01T11:45:42.060 回答