¿Hay alguna forma de mostrar imágenes con una máscara geoJson en Leaflet/otra biblioteca de mapas? Tomé el ejemplo del "mapa de coropletas de los estados de EE. UU." y me gustaría mostrar una imagen de fondo diferente en cada estado. ¿Cómo puedo lograrlo?
Aquí está mi código https://jsfiddle.net/d37zg8f9/ , como puede ver, las imágenes se desbordan de cada estado. En un mundo perfecto, algo así se puede lograr siguiendo HTML:
<svg> <mask id="mask"> <path d=".."></path> </mask> <image mask="url(#mask)" href=".."></image> </svg>Pero no estoy seguro de si hay una forma de inyectar eso en Leaflet.
https://jsfiddle.net/9rzt2uoe/29
Puede usar la propiedad de fill en CSS para llenar rutas SVG con patrones SVG.
Necesitamos un SVG para contener un montón de patrones, cada uno de los cuales contiene una imagen:
<body> <div id='map'></div> <svg id='patterns' width="0" height="0"> <defs id='defs'> </defs> </svg> </body> En onEachFeature , en lugar de agregar superposiciones de imágenes en el mapa, las imágenes se agregan como patrones en defs en los patterns SVG:
let i = 300; const svgPatternsDefs = document.getElementById('defs'); function onEachFeature(feature, layer) { const imageUrl = `https://picsum.photos/${i++}`; const imageBounds = layer.getBounds(); const imageOverlay = L.imageOverlay(imageUrl, imageBounds); //imageOverlay.addTo(map); const imageId = `picture-${i}`; defs.innerHTML += ` <pattern id='${imageId}' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none"> <image xlink:href='${imageUrl}' width="100" height="100" preserveAspectRatio="none"></image> </pattern> `; Promise.resolve().then(() => { // defers execution layer.getElement().style.fill = `url(#${imageId})`; }); } layer.getElement() devuelve undefined hasta que las capas se agregan al mapa. La ejecución del código se puede diferir con Promise.resolve().then
const geoJson = L.geoJson(statesData, { onEachFeature, style : { "fillOpacity" : 1 } }).addTo(map); fillOpacity es 0.2 por defecto y debe establecerse en 1 para que las imágenes se muestren correctamente.