根据官方教程,我现在可以加载并显示本地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没有起作用。只有圆形内部的区域应该被显示,但是除了圆形以外的所有多边形仍然显示在页面上,如下图所示: