Leaflet多边形模糊轮廓线

Question

Leaflet多边形模糊轮廓线

4

我正在寻找一种方法来实现叶片多边形的模糊/渐变轮廓。这可以帮助使国家轮廓更简单（当前，当您缩放到表示国家的svg时，它会变得丑陋/不准确）。

我考虑将CSS属性附加到svg上，类似于此：http://www.w3schools.com/svg/svg_fegaussianblur.asp，但显然用于leaflet多边形的svg子元素<g>不接受此操作。

我还查看了svg的<defs>（请参见此处：http://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html），但不知道如何将其应用于leaflet。 http://leafletjs.com/examples/quick-start-example.html example illustration

- nauti

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iH8 · Accepted Answer

首先，您需要将实际的 filter 元素放入地图的 svg 元素中，否则将过滤器分配给 path 或 g 是无效的，因为过滤器将未定义。因此，您需要在 JavaScript 中执行此操作。但是，在 CSS 中通过类名分配过滤器似乎是不可能的，因为它只能与 CSS 的 url() 函数一起使用，这种方法无法适用于嵌入在 Leaflet 的叠加面板中的动态 SVG。但是，您可以在 JavaScript 中进行分配：

// Get the SVG element from the overlayPane
var svg = map.getPanes().overlayPane.firstChild,
    // Create filter element
    svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
    // Create blur element
    svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');

// Set ID attribute of filter
svgFilter.setAttribute('id', 'blur');

// Give room to blur to prevent clipping
svgFilter.setAttribute('x', '-100%');
svgFilter.setAttribute('y', '-100%');
svgFilter.setAttribute('width', '500%');
svgFilter.setAttribute('height', '500%');

// Set deviation attribute of blur
svgBlur.setAttribute('stdDeviation', 3);

// Append blur element to filter element 
svgFilter.appendChild(svgBlur);
// Append filter element to SVG element
svg.appendChild(svgFilter);

之后，您可以在多边形、线段等上使用过滤器:

// Creating a polygon and adding to the map
var polygon = L.polygon([[10, 10],[-10,10], [-10,-10],[10,-10]]).addTo(map);

// Set filter attribute on the polygon
polygon._path.setAttribute('filter', 'url(#blur)');

好的，这里是一个Plunker上的工作示例：http://plnkr.co/edit/JTNgeXuiBaL8LIbmkVjz?p=preview