具有模糊轮廓的传单多边形 [英] Leaflet polygon with fuzzy outline

问题描述

我正在寻找一种方法来获得传单多边形的模糊/模糊/渐变轮廓.

这应该有助于使国家/地区轮廓更加简单(当前，当您放大代表国家/地区的 svg 时，它会变得丑陋/不准确).

我正在考虑将 CSS 属性附加到与此类似的 svg:

I am looking for a way to have a fuzzy/blur/gradient outline of a leaflet polygon.

This should help make country outlines more simple (currently, when you zoom in to a svg representing a country, it gets ugly/inaccurate).

I was thinking about attaching CSS attributes to the svg similiar to this: http://www.w3schools.com/svg/svg_fegaussianblur.asp But apparently the svg subelement <g> (used for the leaflet polygon) does not accept this.

I also had a look at <defs> of svg (see here: http://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html) but have no clue in applying this to leaflet.

http://leafletjs.com/examples/quick-start-example.html

解决方案

You would first need to put the actual filter element into the svg element of the map, otherwise assigning a filter to a path or g won't work because the filter will be undefined. So you're going to need to do this in Javascript. But assigning a filter by classname in CSS is as far as i can see impossible because it will only work with the url() function of CSS. That won't fly with the dynamic SVG embedded in Leaflet's overlaypane. You can however assign it with 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);

After that you can use the filter on polygons, linestrings, etc:

// 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)');

That's it, here's a working example on Plunker: http://plnkr.co/edit/JTNgeXuiBaL8LIbmkVjz?p=preview

这篇关于具有模糊轮廓的传单多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！