传单图像蒙版

Question

有没有办法在 Leaflet/another 地图库中显示带有 geoJson 掩码的图像？我以“美国各州的等值线图”为例，我想在每个州显示不同的背景图像。我怎样才能实现它？

这是我的代码 https://jsfiddle.net/d37zg8f9/，您可以看到图像从每个状态溢出。在一个完美的世界中，可以通过遵循 HTML:

来实现类似的事情

<svg>
    <mask id="mask">
        <path d=".."></path>
    </mask>
    <image mask="url(#mask)" href=".."></image>
</svg>

但我不确定是否有办法将其注入 Leaflet。

Answer 1

https://jsfiddle.net/9rzt2uoe/29

您可以使用 CSS 中的 fill 属性用 SVG 模式填充 SVG 路径。

我们需要一个 SVG 来保存一堆图案，每个图案都包含一个图像：

<body>

   <div id='map'></div>

   <svg id='patterns' width="0" height="0">
      <defs id='defs'>
      </defs>
   </svg>

</body>

在 onEachFeature 中，不是在地图上添加图像叠加层，而是在 patterns SVG 中的 defs 中将图像作为图案添加：

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() returns undefined 直到图层被添加到地图中。可以使用 Promise.resolve().then

延迟代码执行

const geoJson = L.geoJson(statesData, {
   onEachFeature,
   style : {
      "fillOpacity" : 1
   }
}).addTo(map);

fillOpacity 默认为 0.2，应设置为 1 才能正确显示图像。

传单图像蒙版

Leaflet image mask

javascript

html

leaflet

maps

mask