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
这篇关于具有模糊轮廓的传单多边形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:具有模糊轮廓的传单多边形
基础教程推荐
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 直接将值设置为滑块 2022-01-01