[英]Leaflet polygon with fuzzy outline
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). 这应该有助于使国家概述更简单(目前,当你放大代表一个国家的svg时,它会变得丑陋/不准确)。
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. 我正在考虑将CSS属性附加到与此类似的svg: http : //www.w3schools.com/svg/svg_fegaussianblur.asp但显然svg子元素<g>
(用于传单多边形)不接受这个。
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. 我还看了一下svg的<defs>
(见这里: http : //geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html )但是没有任何线索将此应用于传单。
http://leafletjs.com/examples/quick-start-example.html 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. 您首先需要将实际的filter
元素放入地图的svg
元素中,否则将过滤器指定给path
或g
将不起作用,因为过滤器将是未定义的。 So you're going to need to do this in Javascript. 因此,您需要在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. 但是在CSS中按类名分配过滤器是我认为不可能的,因为它只能用于CSS的url()
函数。 That won't fly with the dynamic SVG embedded in Leaflet's overlaypane. 这不会与Leaflet的overlaypane中嵌入的动态SVG一起飞行。 You can however assign it with Javascript: 但是,您可以使用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 就是这样,这是一个关于Plunker的工作示例: http ://plnkr.co/edit/JTNgeXuiBaL8LIbmkVjz?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.