如何使用svg <clipPath&gt来剪辑Leaflet geoJSON层。

根据 官方教程现在,我可以从本地的geoJSON文件中加载并显示所有多边形。我打算使用一个自定义的轮廓路径来剪切新创建的SVG层。我先用一个圆作为clipPath的子节点,通过Leaflet的L.circle创建,以避免坐标投影。”基于官方示例的主要代码如下。

// Create a circle outline
var clipcircle = new L.circle([34.5, -95.5], {radius: 300000, className: 'outline'}).addTo(map);
// Create <defs> and <clippath> elements using jquery
$('svg').prepend('<defs><clipPath id="myclip"></clipPath></defs>');
// Move the <path> element of clipcircle from <g> to <clipPath>
$('path.outline').appendTo('#myclip');
// Add CSS clip-path attribute to all svg groups
$('g').css('clip-path', 'url(#myclip)');
// load and show polygons from geoJSON
var geojson = L.geoJSON(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);
map.fitBounds(geojson.getBounds());

代码的工作原理和预期的一样,但是剪贴路径没有工作。只有圆圈内的区域才会被显示出来,但是除了圆圈以外的所有多边形都会显示在页面上,如下图所示。

在不移动的情况下添加圆

解决方案:

问题是在创建 clipPath 新元素时,jquery 将元素名小写为 (规格书),因为html标签不应该区分大小写(但似乎clipPath确实区分大小写)

为了克服这个问题,你需要恢复到原生DOM操作,并选择svg和创建元素与 创建ElementNS:

var svg = document.getElementsByTagName('svg')[0]

//Create a new element of clipPath
var clipPathChild = document.createElementNS('http://www.w3.org/2000/svg', "clipPath");

//set an ID (I went lazy and continued with jquery)
$(clipPathChild).attr('id', 'myclip')

//append new node to the svg
svg.appendChild(clipPathChild);

//the "outline" class was added previously to the geojson we want to use as mask 
// add the outline to clip the new node just created
$('path.outline').appendTo('#myclip');

//set the ID of the clip-path to the main feature to clip
$('path').attr('clip-path', 'url(#myclip)');

这个解决方案对我来说是可行的,因为你的代码在理论上是正确的,但由于创建新元素时jquery的简单小写转换而失败了。

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在python中为从数据库中获取的值发送电子邮件。

2022-9-8 2:01:39

未分类

Pygame - 穿越墙壁的生物

2022-9-8 2:01:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索