Как применить css к полилиниям: брошюра

Я работаю с приложением, которое использует листовку 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);

Если кто-то знает что-нибудь о полилинии или другом способе, пожалуйста, помогите. Спасибо за ваше время:-)


leaflet angular-leaflet-directive
person Suhail Mumtaz Awan    schedule 01.10.2015    source источник

Ответы (2)


arrow_upward
18
arrow_downward

Вы можете добавить класс в опции вашей полилинии...

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

См. Параметры пути.

person YaFred    schedule 01.10.2015

arrow_upward
4
arrow_downward

Если вы создаете полилинию, вы фактически добавляете элемент к элементу SVG, который Leaflet использует для рисования своих наложений. Стилизация элементов пути SVG отличается от стиля обычных элементов HTML. Нет таких вещей, как border и background-color и т. д. У них разные свойства, если вам интересно, вот хорошее чтение по этому вопросу:

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

Вы можете стилизовать элементы пути Leaflet, когда создаете их экземпляры с помощью параметров или с помощью CSS, используя свойства (связанные со стилем), описанные в документации здесь:

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, а затем вы можете использовать этот идентификатор в качестве свойства заполнения, как указано в этом ответе: https://stackoverflow.com/a/3798797/2019281, но всегда будет заполнять/размещать изображение по горизонтали, что не будет работать, если ваша полилиния вертикальна.

person iH8    schedule 01.10.2015
comment
большое спасибо, я понял идею, у меня круглая форма, которая не будет влиять ни в каком направлении.... просто нужно заполнить эту форму в линию,,, - person Suhail Mumtaz Awan; 01.10.2015