¿Qué opciones de estilo están disponibles para las polilíneas en Leaflet?

Question

He añadido una capa polilínea como GeoJSON dentro de Leaflet y quiero darle estilo.

Las siguientes opciones para establecer el estilo que pude encontrar (y que funcionan) son:

• color
• peso
• opacidad

¿Cuáles son las otras opciones disponibles, es posible añadir un borde alrededor de la línea?

Answer 1

Esto parece ser un resultado altamente clasificado en los motores de búsqueda, así que pensé en pasar por aquí y actualizar + añadir.

La documentación de Leaflet parece haber sido actualizada desde que se proporcionó la respuesta original (v1.03 frente a v1.40 en el momento de esta publicación), pero incluso entonces la documentación sobre polilíneas no ha identificado nunca ninguna opción de estilo fuera de las 3 utilizadas en el ejemplo (que menciona el OP). Eso hace que encontrar el resto de las opciones sea un poco lento. Estas opciones se heredan de Ruta y ahí es donde encontrarás la documentación sobre ellos. He adjuntado una imagen de las opciones disponibles y he probado todas las que he podido para ver si funcionan (2ª columna), pero sólo en la medida en que mi proyecto actual puede hacer uso de ellas.

Observe el último elemento, 'className'. Esto le permitirá establecer un nombre de clase CSS y utilizar CSS (o SASS) para dar estilo a su polilínea en lugar de codificarla. También hay que tener en cuenta que las reglas CSS parecen anular las opciones de estilo de Leaflet que configure en su código. Desafortunadamente, esto todavía no le permite obtener bordes, es decir. border: 1px solid red; no funciona. Esto se debe a que no son elementos HTML, sino SVG.

SVG no reconoce el concepto de "borde", es decir, una línea alrededor de un objeto. Una polilínea ya es una "línea". Sin embargo, SVG reconoce el concepto de relleno y trazo, que puede utilizarse para lograr un efecto similar al de un borde. Si dibuja un polígono alrededor de la polilínea y establece el trazo con el estilo de borde deseado y el color de relleno con el color de línea deseado, obtendrá un "borde". Puede leer más sobre este enfoque aquí: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet

Y en texto esas opciones de Path son:

• accidente cerebrovascular
• color
• peso
• opacidad
• lineCap
• lineJoin
• dashArray
• dashOffset
• llenar
• fillColor
• fillOpacity
• fillRule
• bubblingMouseEvents
• renderizador
• className

Answer 2

Las opciones de estilo disponibles L.Polyline s son claramente documentado en la referencia de la API de Leaflet . Tenga en cuenta que las opciones de estilo son comunes con los círculos, los polígonos y cualquier otro recorrido, por lo que aparecen como "Opciones heredadas de L.Path ".

¿Es posible añadir un borde alrededor de la línea?

No, no es posible.

Dependiendo de sus necesidades, puede querer amortiguar la línea, o mostrar la línea dos veces, mostrando el trazo más pesado debajo para que sirva como una especie de "carcasa".

Answer 3

¿es posible añadir un borde alrededor de la línea? Sí, sin dibujar la línea dos veces:

- Lo siguiente sólo funciona con Mozilla Firefox

en su archivo CSS añadir:

path.stroke-polyline {
    filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #FFF) drop-shadow(1px -1px 0 #FFF) drop-shadow(-1px 1px 0 #fff);
}

- entonces añade la clase stroke-polyline a la polilínea

Answer 4

Como se mencionó anteriormente, puede dibujar la línea dos veces para obtener un borde de línea:

var style = {
color: "#008000",
weight: 5,
opacity: 0.6
 }, 
stroke = {
color: "#fff",
weight: 7,
opacity: 0.4
};
polyline_2 = new L.Polyline(polylinePoints, stroke);
polyline_2.addTo(active_track);
polyline = new L.Polyline(polylinePoints, style);
polyline.addTo(active_track);