如何在Leaflet中设置GeoJSON图层重叠层级并实现遮挡效果？

一、确保蓝色图层显示在橙色图层上方 #

Leaflet的图层显示层级默认由添加顺序决定，后添加的图层会叠加在之前的图层上方。所以只需先加载橙色图层，再加载蓝色图层，就能实现蓝色在上的效果。

如果需要更精确控制层级（比如后续动态调整），可以通过setZIndex()方法手动设置层级数值，数值越大，图层越靠上：

// 初始化并添加橙色图层
const orangeLayer = L.geoJson(fc2, {
  style: () => ({ color: "#ea6621" })
}).addTo(map);

// 初始化并添加蓝色图层（假设fc1为蓝色要素集合）
const blueLayer = L.geoJson(fc1, {
  style: () => ({ color: "#0078a8" })
}).addTo(map);

// 手动设置层级，确保蓝色图层在上方
blueLayer.setZIndex(100);
orangeLayer.setZIndex(50);

二、隐藏蓝色图层覆盖的橙色区域 #

要实现被覆盖的橙色部分隐藏，需要通过空间差集运算，把橙色图层中被蓝色覆盖的区域剔除，再渲染剩余部分。这里可以用Turf.js（一款开源的地理空间分析库）来完成差集计算：

1. 先引入Turf.js（可通过CDN快速引入：<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>）
2. 计算橙色要素与蓝色要素的差集（即橙色区域减去蓝色覆盖的区域）
3. 用差集结果重新渲染橙色图层

示例代码：

// 假设orangeFeature是橙色图层的单个要素，blueFeature是蓝色图层的单个要素
// 计算差集：保留橙色未被蓝色覆盖的部分
const diffFeature = turf.difference(orangeFeature, blueFeature);

// 构建新的要素集合
const orangeDiffFc = {
  type: "FeatureCollection",
  features: [diffFeature]
};

// 渲染处理后的橙色图层
L.geoJson(orangeDiffFc, {
  style: () => ({ color: "#ea6621" })
}).addTo(map);

// 最后加载蓝色图层，确保层级在上
L.geoJson(fc1, {
  style: () => ({ color: "#0078a8" })
}).addTo(map).setZIndex(100);

注意事项 #

• 如果你的图层包含多个要素，需要遍历每个橙色要素，分别与蓝色要素做差集运算，再将结果合并为新的要素集合
• Turf.js默认使用WGS84坐标系（EPSG:4326），与Leaflet的默认坐标系一致，无需额外转换

内容的提问来源于stack exchange，提问作者user10863293