Agregar un patrón de relleno al estilo de la característica en lugar de un color de relleno en una condición determinada en Leaflet

Question

Como continuación a Hatch polygons in Leaflet

Estoy usando Vue y Quasar pero me encantaría ver cualquier tipo de ejemplo. Lo que tengo es

statestyleCDC(feature) {
   return {
        fillColor: this.getColorBrewerCDC(county[""number]),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };

 getColorBrewerCDC(){

if( d == "*"){
  return "#f9f9f9" //Quiero un patrón de relleno //  
}

//
  if (typeof d == 'undefined') {
         return "#66c2a4"
          }
          return d >=  (this.colorGrades[4])
          ? this.colorGroup[4]
          : d >=  (this.colorGrades[3])
          ? this.colorGroup[3]
          : d >=  (this.colorGrades[2])
          ? this.colorGroup[2]
          : d >=  this.colorGrades[1]
          ?  this.colorGroup[1]
          : d >=  this.colorGrades[0]
          ? this.colorGroup[0]
          : "#000";

}

Lo que quiero hacer es si d= "*" entonces proporcionar un patrón de relleno:

Answer 1

Una posible solución sería eliminar del grupo de capas de GeoJSON aquellas capas que requieren de un relleno de patrón y luego agregar polígonos correspondientes rellenos con patrón, utilizando el plugin de Leaflet leaflet-polygon-fillPattern (http://lwsu.github.io/leaflet-polygon-fillPattern/).

Si tomamos una imagen de patrón svg simple tiny-hatch.svg que se ve así:

entonces para el ejemplo oficial de coropletas de Leaflet en https://leafletjs.com/examples/choropleth/example.html la parte relevante del código sería:

geojson.eachLayer(function(layer) {
  if ((layer.feature.properties.density > 10) && (layer.feature.properties.density < 30)) {
    var coords = layer.getLatLngs();
    var poly = L.polygon(coords, {
      fill:'url(img/tiny-hatch.svg)',
      fillOpacity: 1,
      fillColor: 'white',
      color: '#AAAAAA',
      weight: 1
    }).addTo(geojson);
    geojson.removeLayer(layer);
  }
});

y el resultado se vería así: